1.在public 目录下的index.html 引入高德api
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2225483_4ty3jpxlwb.css">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- dom
<template>
<div class="map-wrap">
<div>
<div class="flex">
<div class="button-wrap">
<el-button
size="small"
type="primary"
icon="el-icon-edit"
@click="handleDraw"
>绘制</el-button
>
<el-button size="small" icon="el-icon-add" @click="handelFinishDraw"
>完成</el-button
>
<el-button
size="small"
icon="el-icon-refresh-left"
@click="handleClearDraw"
>重置</el-button
>
<el-button
size="small"
icon="el-icon-refresh-left"
@click="handleClearAll"
>清空</el-button
>
</div>
</div>
</div>
<div style="width: 100%; height: calc(100% - 150px)">
<div id="container"></div>
</div>
</div>
</template>
- js代码
<script>
export default {
name: "Map",
data() {
return {
map: null,
poly: null,
drawColor: "#2A8DFF",
polygons: [], //多边形覆盖物存储集合
paths: [
[111.683736, 40.818554],
[111.684444, 40.816971],
[111.689036, 40.818172],
[111.688264, 40.819788],
],
mouseOverEvent: true,
isediting: false,
tool: null,
polygon: null,
polygonEditor: null,
};
},
created() {
this.$nextTick(() => {
this.createMap();
});
},
methods: {
createMap() {
// 地图创建
var AMap = window.AMap;
var map = new AMap.Map("container", {
zoom: 11, //级别
center: [111.688264, 40.818205], //兴泰御都国际
viewMode: "3D", //使用3D视图
});
map.setFitView([polygon]); // 缩放地图到合适的视野级别
this.map = map;
// var polyEditor = new AMap.PolyEditor(map, polygon);
},
/* 操作按钮 */
// 编辑
handleDraw() {
// this.poly.open();
let that = this;
var AMap = window.AMap;
this.isediting = true;
//利用高德地图API标记已知点并测量已知点之间的距离，在调用高德地图的类方法的时候会遇到这样的问题
//TypeError: AMap.MouseTool is not a constructor
//这是因为前端没有不认识这个方法（MouseTool）是高德地图的类，所以一直找不到这个方法。
//解决方法是让前端知道这个方法是高德地图的内置类，代码如下：
AMap.plugin(
["AMap.MouseTool", "AMap.GeometryUtil", "AMap.PolyEditor"],
function () {
var mouseTool = new AMap.MouseTool(that.map);
that.tool = mouseTool;
mouseTool.polygon({
strokeColor: "#FFF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: that.drawColor,
fillOpacity: 0.4,
strokeStyle: "solid",
});
mouseTool.on("draw", function (event) {
that.polygon = event.obj; // 获取多边形覆盖物对象
that.polygonEditor = new AMap.PolyEditor(that.map, that.polygon);
that.polygonEditor.open();
that.polygons.push(that.polygon);
});
}
);
},
handelFinishDraw() {
var AMap = window.AMap;
this.isediting = false;
this.tool.close();
this.polygonEditor.close();
var path = this.polygon.getPath();
// 计算面积
var area = AMap.GeometryUtil.ringArea(path);
console.log("多边形的面积为：", area.toFixed(2), "平方米");
// 如果需要转换为字符串或其他处理，可以继续以下操作
var pathString = path
.map(function (p) {
return `(${p.lng}, ${p.lat})`;
})
.join("; ");
console.log("多边形坐标点串：", pathString);
},
//重置
handleClearDraw() {
this.isediting = false;
this.tool.close(true);
},
handleClearAll() {
this.polygons.forEach(function (polygon) {
polygon.setMap(null); // 将多边形覆盖物从地图中移除
});
this.polygons = []; // 清空数组，移除所有的引用
},
//切换颜色
handleChangeColor(item) {
this.drawColor = item.value;
this.tool.polygon({
strokeColor: "#FFF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: this.drawColor,
fillOpacity: 0.4,
strokeStyle: "solid",
});
},
},
};
</script>
