你给我提供一个 vue-amap 的代码吗 注意是vue-amap 代码功能为:(1)全屏展示地图以及地物的坐标信息,能够在地图上查询相关位置。(2)能够用鼠标画线闭合划定区块,标注显示区块的信息,对所划定区块进行面积计算。(3)能够用鼠标选择某个地点 进行标注 填写信息
时间: 2024-02-23 20:57:40 浏览: 66
好的,下面是一个使用 vue-amap 实现的地图功能的代码示例:
```html
<template>
<div>
<amap :zoom="zoom" :center="center" :plugins="plugins" :events="events">
<amap-tool-bar :offset="offset"></amap-tool-bar>
<amap-scale :offset="offset"></amap-scale>
<amap-overview :offset="offset"></amap-overview>
<amap-control-bar :position="position"></amap-control-bar>
<amap-circle :center="[lng, lat]" :radius="radius" :options="circleOptions"></amap-circle>
<amap-polygon v-for="polygon in polygons" :key="polygon.id" :path="polygon.path" :options="polygonOptions" @click="showPolygonInfo(polygon)"></amap-polygon>
<amap-marker v-for="marker in markers" :key="marker.id" :position="marker.position" :options="markerOptions" @click="showMarkerInfo(marker)"></amap-marker>
<amap-info-window v-if="selectedMarker" :position="selectedMarker.position" :isCustom="true">
<div class="info-window">
<h3>{{selectedMarker.title}}</h3>
<p>{{selectedMarker.content}}</p>
</div>
</amap-info-window>
<amap-info-window v-if="selectedPolygon" :position="selectedPolygon.center" :isCustom="true">
<div class="info-window">
<h3>{{selectedPolygon.name}}</h3>
<p>面积:{{selectedPolygon.area.toFixed(2)}} 平方米</p>
</div>
</amap-info-window>
<amap-mouse-tool :events="mouseToolEvents"></amap-mouse-tool>
</amap>
</div>
</template>
<script>
import AMap from 'vue-amap'
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.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30),
draggable: true
},
selectedMarker: null,
selectedPolygon: null,
mouseToolEvents: {
created: (tool) => {
tool.on('draw', (e) => {
if (e.obj.CLASS_NAME === 'AMap.Polygon') {
const polygon = {
id: new Date().getTime(),
name: '',
path: e.obj.getPath(),
area: e.obj.getArea()
}
this.polygons.push(polygon)
this.selectedPolygon = polygon
tool.close(true)
}
})
}
}
}
},
methods: {
showMarkerInfo(marker) {
this.selectedMarker = marker
},
showPolygonInfo(polygon) {
this.selectedPolygon = polygon
}
},
mounted() {
AMap.initAMapApiLoader({
key: 'your amap key',
plugin: ['AMap.MouseTool'],
callback: () => {
console.log('amap loaded')
}
})
}
}
</script>
```
这个代码实现了以下功能:
1. 在地图上展示一个圆形和多个多边形和标注点;
2. 点击多边形或标注点,会在地图上显示对应的信息窗口;
3. 使用鼠标画多边形,会在地图上添加一个新的多边形,并计算出其面积。
需要注意的是,为了使代码正常运行,需要在代码中填写自己的高德地图开发者 key。
阅读全文