vue 高德地图多边形_Vue + 高德地图画矢量图

功能需求

引入并创建地图

支持鼠标工具

鼠标画矢量图(线、圆、矩形、多边形)

支持矢量图编辑、获取各点经纬度及求面积等操作

自定义鼠标右键事件

一图胜千言，效果图如下

创建地图对象

//DOM加载后动态引入地图脚本并map初始化

//template

//mounted

this.$nextTick(function() {

this.initMap();

});

initMap() {

var url = 'https://webapi.amap.com/maps?v=1.4.15&key=秘钥;

var jsapi = document.createElement('script');

jsapi.charset = 'utf-8';

jsapi.src = url;

document.head.appendChild(jsapi);

setTimeout(() => {//一秒延迟，等待脚本加载

let that = this;

let map = new AMap.Map('map', {

zoom: 13, //级别

center: [117.226737, 31.820066], //中心点坐标

pitch: 30, // 地图俯仰角度，有效范围 0 度- 83 度

viewMode: '2D' // 地图模式

});

this.MAP = map;//将map挂载到组件data，后续交互需要用到

}, 1000);

},

复制代码

插件介绍(plugin)

map众多功能需要插件的支持官方文档

使用步奏

//1、引入插件，支持按需异步加载和同步加载，可同时引入多个插件

AMap.plugin(

[

'AMap.InfoWindow',

'AMap.ContextMenu',

'AMap.Heatmap',

'AMap.MouseTool',

'AMap.RangingTool',

'AMap.CircleEditor',

'AMap.PolyEditor',

'AMap.ToolBar',

'AMap.Scale',

'AMap.OverView',