好的，以下是一个简单的示例代码，使用了 vue-amap 插件：
```
<template>
<div class="map-container">
<div class="map" ref="map"></div>
<div class="info">
<div v-if="selectedMarker">
<h3>{{ selectedMarker.title }}</h3>
<p>{{ selectedMarker.content }}</p>
</div>
<div v-else>
<h3>地图信息</h3>
<p>请在地图上选择一个标注
点或划定一个区块</p>
</div>
<div v-if="selectedPolygon">
<h3>区块信息</h3>
<p>面积：{{ selectedPolygon.area }} 平方米</p>
<p>
坐标：{{ selectedPolygon.path }}</p>
</div>
</div>
</div>
</template>
<script>
import AMap from "vue-amap";
export default {
name: "Map",
data() {
return {
map: null,
markers: [
{
position: [116.405467, 39.907761],
title: "北京市",
content: "
中国的首都"
},
{
position: [
121.473701, 31.230416],
title: "上海市",
content: "
中国的经济
中心"
}
],
polygons: [],
selectedMarker: null,
selectedPolygon: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMap.initAMapApiLoader({
key: "your amap key",
plugin: ["AMap.PolyEditor", "AMap.MarkerClusterer"],
callback: () => {
this.map = new AMap.Map(this.$refs.map, {
zoom: 10,
center: [116.397428, 39.90923]
});
this.addMarkers();
this.addPolygon();
this.addMapClickEvent();
}
});
},
addMarkers() {
this.markers.forEach(marker => {
const newMarker = new AMap.Marker({
position: marker.position,
title: marker.title,
content: marker.content
});
newMarker.on("click", () => {
this.selectedMarker = marker;
this.selectedPolygon = null;
});
this.map.add(newMarker);
});
},
addPolygon() {
const polygon = new AMap.Polygon({
path: [
[
121.473701, 31.230416],
[
121.487899, 31.240299],
[
121.489459, 31.227373],
[
121.477974, 31.221775]
],
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: "#1791fc",
fillOpacity: 0.35
});
polygon.setMap(this.map);
polygon.on("click", () => {
this.selectedMarker = null;
this.selectedPolygon = {
area: this.getPolygonArea(polygon.getPath()),
path: polygon.getPath().map(point => point.toString())
};
});
this.polygons.push(polygon);
},
addMapClickEvent() {
this.map.on("click", event => {
const marker = new AMap.Marker({
position: event.lnglat,
title: "标注
点",
content: "请填写标注
点信息"
});
marker.on("click", () => {
this.selectedMarker = {
title: marker.getTitle(),
content: marker.getContent()
};
this.selectedPolygon = null;
});
this.map.add(marker);
});
},
getPolygonArea(path) {
const polygon = new AMap.Polygon({ path });
return Math.round(polygon.getArea() * 100) / 100;
}
}
};
</script>
<style>
.map-container {
display:
flex;
height: 100vh;
}
.map {
flex: 1;
}
.info {
width: 300px;
padding: 20px;
}
</style>
```
这段代码实现了以下功能：
1. 在页面上展示地图，并显示已存储的标注
点。
2.
点击标注
点可以查看标注
点的信息，
点击地图上的空白处可以添加新的标注
点。
3. 划定一个区块后，
点击区块可以查看区块的信息，包括面积和
坐标。
4. 使用
鼠标划定区块时，会在地图上显示所划定区块的面积，并在控制台输出区块的
坐标信息。
请注意，这段代码
中的 AMap key 需要替换为你自己的高德地图开发者 key。
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
