好的，下面是一个使用
vue-a
map 实现的地图功能的代码示例：
```html
<template>
<div>
<a
map :zoom="zoom" :center="center" :plugins="plugins" :events="events">
<a
map-tool-bar :offset="offset"></a
map-tool-bar>
<a
map-scale :offset="offset"></a
map-scale>
<a
map-overview :offset="offset"></a
map-overview>
<a
map-control-bar :position="position"></a
map-control-bar>
<a
map-circle :center="[lng, lat]" :radius="radius" :options="circleOptions"></a
map-circle>
<a
map-polygon v-for="polygon in polygons" :key="polygon.id" :path="polygon.path" :options="polygonOptions" @click="showPolygonInfo(polygon)"></a
map-polygon>
<a
map-
marker v-for="
marker in
markers" :key="
marker.id" :position="
marker.position" :options="
markerOptions" @click="show
MarkerInfo(
marker)"></a
map-
marker>
<a
map-info-window v-if="s
elected
Marker" :position="s
elected
Marker.position" :isCustom="true">
<div class="info-window">
<h3>{{s
elected
Marker.title}}</h3>
<p>{{s
elected
Marker.content}}</p>
</div>
</a
map-info-window>
<a
map-info-window v-if="s
electedPolygon" :position="s
electedPolygon.center" :isCustom="true">
<div class="info-window">
<h3>{{s
electedPolygon.name}}</h3>
<p>面积：{{s
electedPolygon.area.toFixed(2)}} 平方米</p>
</div>
</a
map-info-window>
<a
map-mouse-tool :events="mouseToolEvents"></a
map-mouse-tool>
</a
map>
</div>
</template>
<script>
import A
Map from '
vue-a
map'
export default {
name: '
Map',
data() {
return {
zoom: 14,
center: [121.4389, 31.2246],
plugins: ['ToolBar', 'Scale', 'OverView', 'ControlBar'],
position: 'RB',
offset: [10, 10],
lng: 121.4389,
lat: 31.2246,
radius: 100,
circleOptions: {
strokeColor: '#FF33FF',
strokeWeight: 6,
fillColor: '#1791fc',
fillOpacity: 0.3
},
polygons: [
{
id: 1,
name: '区块1',
path: [
[121.445, 31.228],
[121.447, 31.226],
[121.444, 31.224],
[121.442, 31.226]
]
},
{
id: 2,
name: '区块2',
path: [
[121.444, 31.224],
[121.446, 31.222],
[121.443, 31.220],
[121.441, 31.222]
]
}
],
polygonOptions: {
strokeColor: '#FF33FF',
strokeWeight: 6,
fillColor: '#1791fc',
fillOpacity: 0.3
},
markers: [
{
id: 1,
title: '标注1',
content: '这是标注1的信息',
position: [121.439, 31.225]
},
{
id: 2,
title: '标注2',
content: '这是标注2的信息',
position: [121.441, 31.223]
}
],
markerOptions: {
icon: '//a.a
map.com/jsapi_demos/static/demo-center/icons/poi-
marker-default.png',
offset: new A
Map.Pix
el(-13, -30),
draggable: true
},
s
elected
Marker: null,
s
electedPolygon: null,
mouseToolEvents: {
created: (tool) => {
tool.on('draw', (e) => {
if (e.obj.CLASS_NAME === 'A
Map.Polygon') {
const polygon = {
id: new Date().getTime(),
name: '',
path: e.obj.getPath(),
area: e.obj.getArea()
}
this.polygons.push(polygon)
this.s
electedPolygon = polygon
tool.close(true)
}
})
}
}
}
},
methods: {
show
MarkerInfo(
marker) {
this.s
elected
Marker =
marker
},
showPolygonInfo(polygon) {
this.s
electedPolygon = polygon
}
},
mounted() {
A
Map.initA
MapApiLoader({
key: 'your a
map key',
plugin: ['A
Map.MouseTool'],
callback: () => {
console.log('a
map loaded')
}
})
}
}
</script>
```
这个代码实现了以下功能：
1. 在地图上展示一个圆形和
多个多边形和标注点；
2. 点击多边形或标注点，会在地图上显示对应的信息窗口；
3. 使用鼠标画多边形，会在地图上添加一个新的多边形，并计算出其面积。
需要注意的是，为了使代码正常运行，需要在代码中填写自己的高德地图开发者 key。
2192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
