Reference documentation:
Amap Reference Manual
Amap sample code
1. Create an application in the Amap console and obtain permission ak
Gaode map console
Ps. In this project, basic controls such as buttons use the element-ui version control.
2. Global introduction within the project
Introduce the Amap code into index.html:
<script type="text/javascript"> window._AMapSecurityConfig = {<!-- --> securityJsCode: "your security key" }; </script> <script type="text/javascript" src="//i2.wp.com/webapi.amap.com/maps?v=1.4.6 & amp;key=your key" ></script> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6 & amp;key=your key & amp;plugin=AMap.PolyEditor & amp;plugin=AMap.MouseTool" ></script>
3. Complete project code
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" >Draw</el-button > <el-button size="small" icon="el-icon-add" @click="handelFinishDraw" >Done</el-button > <el-button size="small" icon="el-icon-refresh-left" @click="handleClearDraw" >Reset</el-button > </div> <div class="picker-color" v-if="isediting"> <div class="text">Select a color</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> & amp;nbsp;</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 drawing display page", 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() {<!-- --> // Map creation var map = new AMap.Map("container", {<!-- --> zoom: 11, //Level center: [111.688264, 40.818205], //Xingtai Yudu International viewMode: "3D", //Use 3D view }); //Add a marker point 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: "Oriental Guoxin", 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);//Add LabelMarker instance to LabelsLayer map.add(labelsLayer);//Add LabelsLayer to the map //Create default area 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]); // Zoom the map to the appropriate field of view level this.map = map; // If you want to modify the default area later: just modify this.poly // var polyEditor = new AMap.PolyEditor(map, polygon); // this.poly = polyEditor; }, /* Operation button */ // edit 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("The overlay object is drawn:", event.obj);// event.obj is the drawn overlay object }); }, handelFinishDraw() {<!-- --> this.isediting = false; this.tool.close(); }, //reset handleClearDraw() {<!-- --> this.isediting = false; this.tool.close(true); }, //switch color 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>