参考文档：
高德地图参考手册
高德地图示例代码
1、高德地图控制台创建应用，获取权限ak
高德地图控制台
Ps.本项目里按钮等基础控件使用的是element-ui版本控件
2、项目内全局引入
index.html内引入高德地图代码：
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "你的安全密钥"
};
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.6&key=你的key"
></script>
<script
type="text/javascript"
src="http://webapi.amap.com/maps?v=1.4.6&key=你的key&plugin=AMap.PolyEditor&plugin=AMap.MouseTool"
></script>
3、完整项目代码
template：
<template>
<div class="map-wrap">
<div>
<h1>{{ msg }}</h1>
<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
>
</div>
<div class="picker-color" v-if="isediting">
<div class="text">选择颜色</div>
<span
@click="handleChangeColor(item)"
v-for="item in colors"
:key="item.code"
:class="[
'color' + item.code,
drawColor == item.value ? 'active' : '',
]"
>
<i v-if="drawColor == item.value" class="el-icon-check"></i>
<i v-else> </i>
</span>
</div>
</div>
</div>
<div style="width: 1200px; height: 500px; padding-left: calc(50% - 600px)">
<div id="container"></div>
</div>
</div>
</template>
js:
<script>
export default {
name: "Map",
data() {
return {
msg: "地图绘制展示页",
map: null,
poly: null,
drawColor: "#2A8DFF",
colors: [
{ code: 1, value: "#FF6B36" },
{ code: 2, value: "#FFAD29" },
{ code: 3, value: "#FFDA21" },
{ code: 4, value: "#29E98F" },
{ code: 5, value: "#1EEDE6" },
{ code: 6, value: "#2A8DFF" },
{ code: 7, value: "#CC16EF" },
{ code: 8, value: "#F53ABD" },
],
paths: [
[111.683736, 40.818554],
[111.684444, 40.816971],
[111.689036, 40.818172],
[111.688264, 40.819788],
],
mouseOverEvent: true,
isediting: false,
tool: null,
};
},
created() {
this.$nextTick(() => {
this.createMap();
});
},
methods: {
createMap() {
// 地图创建
var map = new AMap.Map("container", {
zoom: 11, //级别
center: [111.688264, 40.818205], //兴泰御都国际
viewMode: "3D", //使用3D视图
});
// 添加一个标记点
var marker = new AMap.LabelMarker({
icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [111.687931, 40.818392],
offset: new AMap.Pixel(-10, -30),
text: {
content: "东方国信",
direction: "right",
style: {
fontSize: 15,
fillColor: "#fff",
strokeColor: "rgba(255,255,0,0.5)",
strokeWidth: 2,
padding: [3, 10],
backgroundColor: "blue",
borderColor: "#ccc",
borderWidth: 3,
},
},
});
var labelsLayer = new AMap.LabelsLayer({
collision: true,
});
labelsLayer.add(marker);// 将 LabelMarker 实例添加到 LabelsLayer 上
map.add(labelsLayer);// 将 LabelsLayer 添加到地图上
// 创建默认区域
var polygon = new AMap.Polygon({
path: this.paths,
strokeColor: "#fff",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: this.drawColor,
zIndex: 50,
});
map.add(polygon);
map.setFitView([polygon]); // 缩放地图到合适的视野级别
this.map = map;
// 如果后期想修改默认区域：修改this.poly即可
// var polyEditor = new AMap.PolyEditor(map, polygon);
// this.poly = polyEditor;
},
/* 操作按钮 */
// 编辑
handleDraw() {
// this.poly.open();
this.isediting = true;
var mouseTool = new AMap.MouseTool(this.map);
this.tool = mouseTool;
mouseTool.polygon({
strokeColor: "#FFF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: this.drawColor,
fillOpacity: 0.4,
strokeStyle: "solid",
});
mouseTool.on("draw", function (event) {
console.log("覆盖物对象绘制完成:", event.obj);// event.obj 为绘制出来的覆盖物对象
});
},
handelFinishDraw() {
this.isediting = false;
this.tool.close();
},
//重置
handleClearDraw() {
this.isediting = false;
this.tool.close(true);
},
//切换颜色
handleChangeColor(item) {
this.drawColor = item.value;
this.tool.polygon({
strokeColor: "#FFF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: this.drawColor,
fillOpacity: 0.4,
strokeStyle: "solid",
});
},
},
};
</script>
css:
<style scoped>
h1 {
font-weight: normal;
}
#container {
width: 100%;
height: 100%;
}
.map-wrap {
position: relative;
width: 100%;
height: 100%;
}
.map-wrap .flex {
display: flex;
flex-shrink: 0;
white-space: nowrap;
justify-content: space-between;
align-items: center;
height: 50px;
line-height: 50px;
width: 1200px;
padding-left: calc(50% - 600px);
}
.allmap {
width: 100%;
height: calc(100% - 50px);
position: absolute;
}
ul {
list-style: none;
}
.picker-color {
text-align: right;
padding-right: 30px;
}
.text {
display: inline-block;
padding: 0 10px;
float: left;
}
span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 20px;
border-radius: 4px;
border-width: 2px;
border-style: solid;
margin-left: 8px;
overflow: hidden;
text-align: center;
margin-top: 10px;
float: left;
}
span i {
font-weight: 600;
}
.color1 {
border-color: #ff6b36;
background: rgba(255, 107, 54, 0.3);
color: #ff6b36;
}
.color2 {
border-color: #ffad29;
background: rgba(255, 173, 41, 0.3);
color: #ffad29;
}
.color3 {
border-color: #ffda21;
background: rgba(255, 218, 33, 0.3);
color: #ffda21;
}
.color4 {
border-color: #29e98f;
background: rgba(41, 233, 143, 0.3);
color: #29e98f;
}
.color5 {
border-color: #1eede6;
background: rgba(30, 237, 230, 0.3);
color: #1eede6;
}
.color6 {
border-color: #2a8dff;
background: rgba(42, 141, 255, 0.3);
color: #2a8dff;
}
.color7 {
border-color: #cc16ef;
background: rgba(204, 22, 239, 0.3);
color: #cc16ef;
}
.color8 {
border-color: #f53abd;
background: rgba(245, 58, 189, 0.3);
color: #f53abd;
}
</style>
