前言：

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

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

官网入口

十七、搜索框

<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

事件

事件名	参数	说明
init	Object	参数包含 { 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>

实现效果：

属性

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

事件

事件	参数	说明
init	Object	高德插件示例

二十、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>

实现效果：

属性

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

事件

事件	参数	说明
init	Object	高德插件示例

二十一、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>

实现效果:

属性

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

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

事件

事件	参数	说明
init	Object	高德插件示例

二十三、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, } = poiconst 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// orreturn 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 的相关属性外，还有以下的关键属性

名称	类型	说明
name	String	component Name
init	Function(options, AMapInstance)	该 hook 是父组件`vue-amap`中地图实例初始化后进行调用的, 所以依赖于父组件，该函数的作用是组件对应的高德实例进行初始化，关键步骤`return componentInstance / resolve(componentInstance)`，返回个实例，异步初始化需要返回一个 `Promise`，将实例 `resolve` 出来；
contextReady	Fucntion	该 hook 在组件 `mounted` 中并且浏览器上下文完成高德脚本加载后执行，该 hook 内部可安全使用高德API，该 hook 依赖于内部的 `lazyAMapApiLoaderInstance`, 请务必保证在该组件 `mounted` 前完成初始化函数 `initAMapApiLoader` 调用。该 hook 并不依赖父组件，可独立存在，适用于一些简单无交互的工具组件
converters	Object: {[propKey]:Function}	对于组件原始入参的转换函数，像一些坐标类型数据需要从原始数组转为 `AMap.LngLat`，本库内部内置了 `position: toLngLat, offset: toPixel, bounds: toBounds` 的转换
handlers	Object: {[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-amapvid="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-amapvid="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 = bgColorlet 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-amapvid="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-amapvid="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-amapvid="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-amapvid="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-amapvid="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-amapvid="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-amapvid="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-amapvid="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-amapvid="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>

实现效果：

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

高德离线地图vue-amap的api文档（2）：创建地图，撒点等等相关推荐

jsdoc api文档_创建更好的JSDoc文档
jsdoc api文档 Writing code documentation is one of the most relaxing experiences of my work as a back ...
设置电子围栏高德地图_地理围栏-API文档-开发指南-Web服务 API | 高德地图API
产品介绍地理围栏服务是一类HTTP接口,提供在服务端,增删改查地理围栏的功能,同时支持对于设备与围栏关系进行监控. 适用场景地理围栏服务适用于需要针对特定区域,监控用户位置与区域关系的场景中.包括 ...
高德 ip定位 android,IP定位-API文档-开发指南-Web服务 API | 高德地图API
产品介绍 IP定位是一套简单的HTTP接口,根据用户输入的IP地址,能够快速的帮用户定位IP的所在位置. IP定位 2.0(推荐):支持IPV4和IPV6两种地址,还支持部分国外国家或地区的IP解析: ...
.NET Core 3.0 使用Nswag生成Api文档和客户端代码
摘要在前后端分离.Restful API盛行的年代,完美的接口文档,成了交流的纽带.在项目中引入Swagger (也称为OpenAPI),是种不错的选择,它可以让接口数据可视化.下文将会演示利用N ...
干掉 Swagger + Postman？测试接口直接生成API文档，这个国产文档工具真香！
点击上方"芋道源码",选择"设为星标" 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏原创 | ...
必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图
最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...
Zeal —— API文档离线阅读器
背景在软件开发的过程中,常常需要查阅多个API文档,但网络环境等因素常常导致在线文档查看用户体验并不佳.为此,介绍一款离线的API文档阅读器,Zeal.Zeal中自配了多种API文档可供查阅,如El ...
linux 离线文档下载,Zeal 离线API文档浏览器
ZEAL是一款离线文档浏览器,其灵感来自 OS X平台上的 Dash,目前支持 Window 和 Liunx.基于 QT5.Zeal 是一个简单的离线 API 文档浏览器,仿照 Dash (一个 OS ...
java官网下载离线api文档地址
java官网下载离线api文档地址看到很多人在csdn资源区放着自己下载过的jdk和java离线文档,很是气愤,很多人只是没找到官网的下载位置,这种免费的东西你也好意思收50C币,甚至有的还要钱,这 ...
很安逸的离线API文档查询工具Dash和Zeal
大家开发的时候难免会查询一些文档,看一下API的调用方法等,所以会不同的语言去某一个地方去找,确实很麻烦,今天给大家安逸两款软件,肯定会让你爱不释手! Dash for macOS 官方地址:http ...

高德离线地图vue-amap的api文档（2）：创建地图，撒点等等

前言：

高德离线地图的使用场景还是很多的，但是他的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 开始支持。

实现效果：

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

高德离线地图vue-amap的api文档（2）：创建地图，撒点等等相关推荐

最新文章

热门文章

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

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

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

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

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