前言：
高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。
注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口
目录：
十九、MapType 地图类型切换插件，用来切换固定的几个常用图层
二十一、Scale 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。
二十二、ToolBar 地图工具条插件，可以用来控制地图的缩放和平移。
官网入口
十七、搜索框
<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, } = 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 的相关属性外，还有以下的关键属性
| 名称 | 类型 | 说明 |
|---|---|---|
| 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-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>实现效果：
