前言：

       高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。

注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口

目录：

十七、搜索框

实现效果：

API

onSearchResult

事件

十八、插件

引入方式

1 - 全局引入地图插件

2 - 配置插件

配置说明

十九、MapType 地图类型切换插件，用来切换固定的几个常用图层

实现效果：

属性

事件

二十、Overview 地图鹰眼插件。

实现效果：

属性

事件

二十一、Scale 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。

二十二、ToolBar 地图工具条插件，可以用来控制地图的缩放和平移。

实现效果:

属性

事件

二十三、Geolocation

实现效果：

二十四、自定义组件

1、案例1

实现效果：

2、案例2

实现效果：

3、案例3

实现效果：

二十五、地图实例  点击地图获取经纬度和具体地址

实现效果：

二十六、点坐标 - 聚合

实现效果：

二十七、点坐标 - 自定义内容

1、基础 content 渲染

实现效果：

2、template 模板渲染

实现效果：

3、render 方式渲染  v0.4.3 开始支持。

实现效果：

4、slots 渲染 v0.4.5 开始支持。

实现效果：

二十八、信息窗体 - 切换

实现效果：

二十九、点坐标 - 自定义内容

1、基础 content 渲染

实现效果：

2、template 模板渲染

实现效果：

3、render 方式渲染 v0.4.3 开始支持。

实现效果：

4、slots 渲染 v0.4.5 开始支持。

实现效果：

 

官网入口

 

十七、搜索框

<template>
    <div class="amap-page-container">
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
      <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
        <el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }

    .search-box {
      position: absolute;
      top: 25px;
      left: 20px;
    }

    .amap-page-container {
      position: relative;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          markers: [
            [121.59996, 31.197646],
            [121.40018, 31.197622],
            [121.69991, 31.207649]
          ],
          searchOption: {
            city: '上海',
            citylimit: true
          },
          mapCenter: [121.59996, 31.197646]
        };
      },
      methods: {
        addMarker: function() {
          let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
          let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
          this.markers.push([lng, lat]);
        },
        onSearchResult(pois) {
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            this.mapCenter = [center.lng, center.lat];
          }
        }
      }
    };
</script>

实现效果：

API

参数说明类型
searchOption搜索条件Object
onSearchResult)搜索回调函数function[ {lng, lat} ]
default默认值String
## searchOption  
属性说明类型
----------
city城市名String
citylimit是否限制城市内搜索Boolean

onSearchResult

参数说明类型
pois经纬度对象数组Object

事件

事件名参数说明
initObject参数包含 { autoComplete, placeSearch} ，分别为自动补全以及地址搜索插件的高德实例

十八、插件

引入方式

1 - 全局引入地图插件

首先需要在项目初始化时，通过 initAMapApiLoader 引入所需要的插件。

使用插件之前一定要初始化，否则会报错！

import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor']
});

2 - 配置插件

全局引入后，需要给单个地图组件配置插件:

<template>
  <div>
    <el-amap vid="amapDemo" :plugin="plugins"></el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plugins: ['MapType'];
    };
  };
};
</script>

配置说明

插件名支持两种，不带"AMap"前缀，如"MapType",带"AMap"前缀，如"AMap.MapType"。推荐前者，以下都基于前者说明。 （v0.1.2之前版本，只支持后者）

插件的配置支持两种方式。

1 - 默认配置

只配置插件名，配置则用默认

{
  plugin: ['MapType']
}

2 - 自定义配置

（v0.1.2开始支持）

自定义配置对象，pName为插件名。所有属性仅支持初始化配置，不支持响应式。

{
  plugin: [{
    // pName为必填字段
    pName: 'MapType',
    defaultType: 1
  }]
}

十九、MapType 地图类型切换插件，用来切换固定的几个常用图层

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        return {
          plugin: [{
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }]
        };
      }
    };
</script>

实现效果：

属性

名称类型说明
defaultTypeNumber初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
showTrafficBoolean叠加实时交通图层 默认值：false
showRoadBoolean叠加路网图层 默认值：false

事件

事件参数说明
initObject高德插件示例

二十、Overview 地图鹰眼插件。

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        return {
          plugin: [{
            pName: 'OverView',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }]
        };
      }
    };
</script>

实现效果：

属性

名称类型说明
isOpenBoolean鹰眼是否展开，默认为false
visibleBoolean鹰眼是否显示，默认为true

事件

事件参数说明
initObject高德插件示例

二十一、Scale 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        return {
          plugin: [{
            pName: 'Scale',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }]
        };
      }
    };
</script>

二十二、ToolBar 地图工具条插件，可以用来控制地图的缩放和平移。

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        return {
          plugin: [{
            pName: 'ToolBar',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }]
        };
      }
    };
</script>

实现效果:

属性

名称类型说明
positionString控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LT
rulerBoolean标尺键盘是否可见，默认为true
noIpLocateBoolean定位失败后，是否开启IP定位，默认为false
locateBoolean是否显示定位按钮，默认为false
liteStyleBoolean是否使用精简模式，默认为false
directionBoolean方向键盘是否可见，默认为true
autoPositionBoolean是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，仅在支持HTML5的浏览器中有效，默认为false
useNativeBoolean是否使用高德定位sdk用来辅助优化定位效果，默认：false.

仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，还需要调用高德定位sdk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册

事件

事件参数说明
initObject高德插件示例

二十三、Geolocation

Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位 sdk 辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果，一种是在 getCurrentPosition 的时候传入回调函数来处理定位结果，一种是通过事件监听来取得定位结果。Geolocation 定位常见问题说明 注：默认情况下，PC端优先使用精确IP定位，解决多数浏览器无法完成定位的现状，IP定位失败后使用浏览器定位；手机端优先使用浏览器定位，失败后使用IP定位；对于安卓WebView页面的开发者，可以结合定位 sdk 进行辅助定位，详细说明见 useNative 参数。IP定位的精度值为 null。

由于 Chrome 、IOS10 等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到 HTTPS 

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
      </el-amap>

      <div class="toolbar">
        <span v-if="loaded">
          location: lng = {{ lng }} lat = {{ lat }}
        </span>
        <span v-else>正在定位</span>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        let self = this;
        return {
          center: [121.59996, 31.197646],
          lng: 0,
          lat: 0,
          loaded: false,
          plugin: [{
            pName: 'Geolocation',
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.$nextTick();
                  }
                });
              }
            }
          }]
        };
      }
    };
</script>

实现效果：

二十四、自定义组件

实际开发中面对复杂业务，库中现有的几个基础组件很多时候无法满足我们的业务需求，另一个方面在于高德的sdk也在疯狂更新，一味的包装也不是长久之计，所以这里提供一个方法 -- createCustomComponent，让用户自己开发并维护自己特定业务组件，同时也希望通过社区成员一起建设公共组件。

1、案例1

<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        <amap-canvas-markers
          :data="markerData"
          :get-position="markerOptions.getPosition"
          :get-hover-title="markerOptions.getHoverTitle"
          :visible="markerOptions.visible"
          render-constructor="PointSimplifier.Render.Canvas"
          :render-options="markerOptions.renderOptions"
          :events="markerOptions.events"
          ></amap-canvas-markers>
      </el-amap>
      <div class="toolbar">
        <button type="button" name="button" @click="toggleVisible">toggle visible</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>
  <script>
    // import {createCustomComponent} from 'vue-amap' 
    const { createCustomComponent } = VueAMap;
    // 组件定义
    const AmapCanvasMarkers = createCustomComponent({
      name: 'amap-canvas-marker',
      props: [
        'visible',
        'zIndex',
        'data',
        'getPosition',
        'getHoverTitle',
        'compareDataItem',
        'autoSetFitView',
        'renderConstructor',
        'renderOptions',
        'maxChildrenOfQuadNode',
        'maxDepthOfQuadTree',
        'badBoundsAspectRatio'
      ],
      contextReady() {
        console.log('context ready', AMap);
      },
      init(options, map) {
        return new Promise((resolve, reject) => {
          AMapUI.loadUI(['misc/PointSimplifier'], PointSimplifier => {
            const {renderConstructor: renderStr, renderOptions } = options;
            // console.log(renderStr);
            if (renderStr) options.renderConstructor = renderStr.split('.').reduce((pre, cur) =>  pre[cur], {PointSimplifier});
            if (options.renderOptions && options.renderOptions.pointStyle) {
              const {pointStyle} = options.renderOptions;
              if (pointStyle.contentImg) pointStyle.content = PointSimplifier.Render.Canvas.getImageContent(pointStyle.contentImg, () => this.$amapComponent.renderLater()),
              e => console.error(e)
            }
            resolve(new PointSimplifier(options))
          });
        })
      },
      converters: {},
      handlers: {
        zIndex(index) {
          this.setzIndex(index);
        },
        visible(flag) {
          flag === false ? this.hide() : this.show();
        }
      }
    });
    const center = [121.5273285, 31.21515044];
    const markerData = Array.from({length: 10000},(x, index) => ({position: [
      center[0] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 0.6,
      center[1] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 0.6
    ], title: `小点坐标-${index}`}));
    module.exports = {
      components: {AmapCanvasMarkers},
      data() {
        return {
          zoom: 14,
          center,
          markerData,
          markerOptions: {
            visible: true,
            getPosition(dateItem) {
              return dateItem.position
            },
            getHoverTitle(dateItem) {
              return dateItem.title
            },
            renderOptions: {
              pointStyle: {
                contentImg: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
                width: 19,
                height: 31,
                offset: ['-50%', '-100%'],
                fillStyle: null,
                strokeStyle: null
              }
            },
            events: {
              pointClick(e, point) {
                console.log('event pointClick', e, point)
              },
              pointMouseover(e, point) {
                console.log('event pointMouseover', e, point);
              },
              pointMouseout(e, point) {
                console.log('event pointMouseout', e, point)
              }
            }
          }
        }
      },
      methods: {
        toggleVisible() {
          this.markerOptions.visible = !this.markerOptions.visible;
        }
      }
    }
</script>

实现效果：

2、案例2

<style>
  .amap-demo {
    height: 300px;
  }
  .container {
    position: relative;
  }
  .tip {
      background-color: #ddf;
      color: #333;
      border: 1px solid silver;
      box-shadow: 3px 4px 3px 0px silver;
      position: absolute;
      top: 10px;
      right: 10px;
      border-radius: 5px;
      overflow: hidden;
      line-height: 20px;
      z-index: 99;
  }
  .tip input {
      height: 25px;
      border: 0;
      padding-left: 5px;
      width: 280px;
      border-radius: 3px;
      outline: none;
  }
</style>
<template>
  <div class="container">
  <div class="tip">
    <input class="custom-componet-input" id="custom-componet-input" />
  </div>
    <el-amap vid="xxx" :zoom="zoom" :center="center" class="amap-demo">
      <custom-map-searchbox @select="selectSearch" input="custom-componet-input" ></custom-map-searchbox>
      <el-amap-marker v-if="selectMarker" :position="selectMarker.position" :label="selectMarker.label"></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>

const customMapSearchbox = VueAMap.createCustomComponent({
  props: {
    input: String
  },
  init(options, map) {
    return new Promise(resolve => {
      AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], () => {
        const autocomplete = new AMap.Autocomplete(options)
        AMap.event.addListener(autocomplete, 'select', (e) => {
          this.$emit('select', e.poi)
        });
        resolve(autocomplete)
      })
    });
  }
})

module.exports = {
  data() {
    return {
      selectMarker: null,
      zoom: 14,
      center: [121.5273285, 31.21515044]
    }
  },
  components: {customMapSearchbox},
  methods: {
    selectSearch(poi) {
      console.log(poi)
      const {location, name, adcode, district, address, } = poi
      const center = [location.lng, location.lat];
      console.log(center)
      this.selectMarker = {
        label: {content: `<div>
          <div>${name}</div>
          <div>${district}</div>
        </div>`, offset: [20, 20]},
        position: [...center]
      },
      console.log(this.selectMarker);
      this.center = center;
    }
  }
}
</script>

实现效果：

3、案例3

<style>
.xxconatiner {
  position: relative;
  padding: 60px 10px
}
.tip {
    background-color: #ddf;
    color: #333;
    border: 1px solid silver;
    box-shadow: 3px 4px 3px 0px silver;
    display: inline-block;

    border-radius: 5px;
    overflow: hidden;
    line-height: 20px;
    z-index: 99;
}
.tip input {
    height: 25px;
    border: 0;
    padding-left: 5px;
    width: 280px;
    border-radius: 3px;
    outline: none;
}
</style>

<template>
<div class="xxconatiner">
  <custom-search @select="select">
  </custom-search>
</div>
</template>

<script>
const customSearch = VueAMap.createCustomComponent({
  template: `<div class="tip">
    <input class="custom-componet-input" :id="id" />
  </div>`,
  data() {
    return {
      id: `custom-componet-input-${Math.random()}`
    }
  },
  contextReady(_options) {
    const options = {
      ..._options,
      input: this.id
    }
    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], () => {
      const autocomplete = new AMap.Autocomplete(options)
      AMap.event.addListener(autocomplete, 'select', (e) => {
        this.$emit('select', e.poi)
      })
      this.$amapComponent = autocomplete
    })
  }
})
module.exports = {
  components: {customSearch},
  methods: {
    select(poi) {
      console.log(poi)
    }
  }
}
</script>

实现效果：

import {createCustomComponent} from 'vue-amap'
const customComponent = createCustomComponent({
  name: 'custom-component-name',
  init() {  // required
    ...
    return amapInstance // required
    // or
    return new Promise(resolve => {
      ...
      resolve(amapInstance)
    })
    ...
  },
  converters: {
    [propKey](propVal) {
      return customConvert(propVal)
    }
  },
  handlers: {
    [propKey]() {
      // callback
    }
  },
  contextReady() {},
  created() {},
  mounted() {},
  destoryed() {},
  // other hooks
})

Vue.use(customComponent) // registered as a component named [custom-component-name]

以上是一个简单的组件的例子，关键函数就是 createCustomComponent(VueComponentOptionsPlus)，返回是一个完整的 VueComponentOptions， 入参除了具有基本的 VueComponentOptions 的相关属性外，还有以下的关键属性

名称类型说明
nameStringcomponent Name
initFunction(options, AMapInstance)该 hook 是父组件vue-amap中地图实例初始化后进行调用的, 所以依赖于父组件，该函数的作用是组件对应的高德实例进行初始化，关键步骤return componentInstance / resolve(componentInstance)，返回个实例，异步初始化需要返回一个 Promise，将实例 resolve 出来；
contextReadyFucntion该 hook 在组件 mounted 中并且浏览器上下文完成高德脚本加载后执行，该 hook 内部可安全使用高德API，该 hook 依赖于内部的 lazyAMapApiLoaderInstance, 请务必保证在该组件 mounted 前完成初始化函数 initAMapApiLoader 调用。该 hook 并不依赖父组件，可独立存在，适用于一些简单无交互的工具组件
convertersObject: {[propKey]:Function}对于组件原始入参的转换函数，像一些坐标类型数据需要从原始数组转为 AMap.LngLat，本库内部内置了 position: toLngLat, offset: toPixel, bounds: toBounds 的转换
handlersObject: {[propKey]: Function}自定义组件属性值变化后对应的回调，内置的回调指定规则是 自定义 handler -> 高德实例 set[PropKey] 方法 -> setOptions 方法 从左到右的依次判空，如果存在则指定调用该回调，注：回调函数的默认 this 是该 高德实例

原理其实很简单，内部 watch 了所有提前申明的 prop，propValue 改变时执行对应回调，规则如上。自定义组件的实例上维护了有两个特殊的属性 $amap 高德地图实例(父组件为 vue-amap 才会初始化)和 $amapComponent高德组件实例；

关于 destoryed 内置了通用的回收方法，如果不满足请务必自行回收。

二十五、地图实例  点击地图获取经纬度和具体地址

如果需要坐标转地址服务，也就是下面用到的 Geocoder ，请注意在地图初始化的时候要记得引入：

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_CODE',
  plugin: [... 'Geocoder']
});
<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"  
        class="amap-demo"
        :events="events">
      </el-amap>
      <div class="toolbar">
        position: [{{ lng }}, {{ lat }}] address: {{ address }}
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;

        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          address: '',
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;

              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });        
            }
          },
          lng: 0,
          lat: 0
        };
      }
    };
</script>

实现效果：

二十六、点坐标 - 聚合

引入插件

import VueAMap from 'vue-amap';

VueAMap.initAMapApiLoader({
  key: 'YOUR CODE',
  plugin: [..., 'MarkerClusterer']
});
<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"
        class="amap-demo"
        :events="events">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :content="marker.content" :events="marker.events"></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;

        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          markers: [],
          markerRefs: [],
          events: {
            init(o) {
              setTimeout(() => {
                console.log(self.markerRefs);
                let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
                  gridSize: 80,
                  renderCluserMarker: self._renderCluserMarker
                });
                console.log(cluster);
              }, 1000);
            }
          }
        };
      },

      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];

        while (++index <= 30) {
          markers.push({
            position: [basePosition[0] + 0.01 * index, basePosition[1]],
            content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            events: {
              init(o) {
                self.markerRefs.push(o);
              }
            }
          });
        }

        this.markers = markers;
      },

      methods: {
        _renderCluserMarker(context) {
          const count = this.markers.length;

          let factor = Math.pow(context.count/count, 1/18)
          let div = document.createElement('div');
          let Hue = 180 - factor* 180;
          let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
          let fontColor = 'hsla('+Hue+',100%,20%,1)';
          let borderColor = 'hsla('+Hue+',100%,40%,1)';
          let shadowColor = 'hsla('+Hue+',100%,50%,1)';
          div.style.backgroundColor = bgColor
          let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
          div.style.width = div.style.height = size+'px';
          div.style.border = 'solid 1px '+ borderColor;
          div.style.borderRadius = size/2 + 'px';
          div.style.boxShadow = '0 0 1px '+ shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size+'px';
          div.style.color = fontColor;
          div.style.fontSize = '14px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
          context.marker.setContent(div)
        }
      }
    };
</script>

实现效果：

二十七、点坐标 - 自定义内容

1、基础 content 渲染

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index" :content="marker.content"></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const center = [121.59996, 31.197646];

        return {
          zoom: 12,
          center,
          markers: []
        };
      },

      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];
        let num = 10;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0], basePosition[1] + i * 0.03],
            content: `content ${i}`
          });
        }
        this.markers = markers;
      }
    };
</script>

实现效果：

2、template 模板渲染

支持传入 Vue 模板，支持 Vue 机制的事件绑定和状态访问。当同时设置 content 和 template 时，优先 content。v0.4.0 开始支持。

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo1"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :template="marker.template"></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;

        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          markers: [],
          markerRefs: [],
          source: 'click'
        };
      },

      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];
        let num = 10;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0], basePosition[1] + i * 0.03],
            template: `<button @click="handler(${ i })">{{ source }} ${ i }</button>`
          });
        }
        this.markers = markers;
      },

      methods: {
        handler(index) {
          alert(`${ index } - trigger`);
        }
      }
    };
</script>

实现效果：

3、render 方式渲染  v0.4.3 开始支持。

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo2"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="(marker, index) in componentsMarkers" :position="marker.position" :vid="marker.vid" :content-render="marker.contentRender"></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const BtnComponent = {
          props: ['text'],
          template: `<button>{{text}}</button>`
        };
        const center = [121.59996, 31.197646];
        const componentsMarkers = [1,2,3,4].map((item, index) => {
          return {
            position: [center[0] + index * 0.02, center[1] + index * 0.02],
            vid: `${index}-vid`,
            contentRender: h => h(BtnComponent, {
                props: {
                  text: `component ${index}`
                },
                style: {
                  background: 'rgb(173, 47, 47)',
                  color: '#eee'
                },
                nativeOn: {
                  click: () => this.handler(`component-${index}`)
                }
              })
          }
        });
        return {
          zoom: 12,
          center,
          markers: [],
          markerRefs: [],
          source: 'click',
          componentsMarkers
        };
      },
      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];
        let num = 10;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0], basePosition[1] + i * 0.03],
            contentRender: h => h('button', {
              on: {click: () => this.handler(i)}}, [`source-${i}`])
          });
        }
        this.markers = markers;
      },

      methods: {
        handler(index) {
          alert(`${ index } - trigger`);
        }
      }
    };
</script>

实现效果：

4、slots 渲染 v0.4.5 开始支持。

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo3"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index">
          <div :style="slotStyle">
            <b>Hello {{ count }} times</b>
            <button @click="onClick">Add</button>
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const center = [121.59996, 31.197646];

        return {
          zoom: 12,
          center,
          markers: [],
          count: 0,
          slotStyle: {
            padding: '2px 8px',
            background: '#eee',
            color: '#333',
            border: '1px solid #aaa'
          }
        };
      },

      methods: {
        onClick() {
          this.count += 1;
        }
      },

      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];
        let num = 10;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0], basePosition[1] + i * 0.03]
          });
        }
        this.markers = markers;
      }
    };
</script>

实现效果：

二十八、信息窗体 - 切换

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"  
        class="amap-demo">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events"></el-amap-marker>
        <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }

    .prompt {
      background: white;
      width: 100px;
      height: 30px;
      text-align: center;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          zoom: 16,
          center: [121.59996, 31.197646],
          markers: [],
          windows: [],
          window: ''
        };
      },

      mounted() {
        let markers = [];
        let windows = [];

        let num = 10;
        let self = this;

        for (let i = 0 ; i < num ; i ++) {
          markers.push({
            position: [121.59996, 31.197646 + i * 0.001],
            events: {
              click() {
                self.windows.forEach(window => {
                  window.visible = false;
                });

                self.window = self.windows[i];
                self.$nextTick(() => {
                  self.window.visible = true;
                });
              }
            }
          });

          windows.push({
            position: [121.59996, 31.197646 + i * 0.001],
            content: `<div class="prompt">${ i }</div>`,
            visible: false
          });
        }

        this.markers = markers;
        this.windows = windows;
      }
    };
</script>

实现效果：

二十九、点坐标 - 自定义内容

1、基础 content 渲染

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-info-window :position="window.position" :content="window.content"></el-amap-info-window>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let center = [121.59996, 31.197646];
        return {
          zoom: 12,
          center,
          window: {
            position: center,
            content: 'content'
          }
        };
      },

      created() {
      }
    };
</script>

实现效果：

2、template 模板渲染

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo1"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-info-window :position="window.position" :template="window.template"></el-amap-info-window>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;

        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          markers: [],
          markerRefs: [],
          source: 'click'
        };
      },

      created() {
        let basePosition = [121.59996, 31.197646];
        this.window = {
          position: [basePosition[0], basePosition[1]],
          template: `<button @click="handler('hello')">{{ source }}</button>`
        }
      },

      methods: {
        handler(index) {
          alert(`${ index } - trigger`);
        }
      }
    };
</script>

实现效果：

3、render 方式渲染 v0.4.3 开始支持。

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo2"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-info-window :position="window.position" :content-render="window.contentRender"></el-amap-info-window>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const BtnComponent = {
          props: ['text'],
          template: `<button>{{text}}</button>`
        };
        const center = [121.59996, 31.197646];
        return {
          zoom: 12,
          center,
          markers: [],
          source: 'click',
          window: {
            position: center,
            contentRender: h => h(BtnComponent, {
                props: {
                  text: 'hello'
                },
                style: {
                  background: 'rgb(173, 47, 47)',
                  color: '#eee'
                },
                nativeOn: {
                  click: () => this.handler(`hello click`)
                }
              })
          }
        };
      },
      created() {
      },

      methods: {
        handler(val) {
          alert(`${ val } - trigger`);
        }
      }
    };
</script>

实现效果：

4、slots 渲染 v0.4.5 开始支持。

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo3"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-info-window :position="window.position">
          <div :style="slotStyle">
            <b>Hello {{ count }} times</b>
            <button @click="onClick">Add</button>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const center = [121.59996, 31.197646];

        return {
          zoom: 12,
          center,
          count: 0,
          slotStyle: {
            padding: '2px 8px',
            background: '#eee',
            color: '#333',
            border: '1px solid #aaa'
          },
          window: {
            position: [121.59996, 31.197646]
          }
        };
      },

      methods: {
        onClick() {
          this.count += 1;
        }
      },

      created() {
      }
    };
</script>

实现效果：

到此就结束了，累坏我了。。。

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue