vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记

第一步：

首先在index.html入口文件中添加引入高德地图的js，并填写自己在官网申请的key。如果没有申请不填写也是可以的。

plugin：项目中如果有需要引入插件则使用没有直接去掉就行。

第二步： 在需要的页面map.vue页面加入div并设置div的id

宽高一定要有，地图在页面呈现是canvas做图所以需要设定宽高。

第三步：在vue.js中根据div的id=container关联js即可。

map = new AMap.Map('container', { //创建地图

zoom: 11, //地图显示的缩放级别

center: [116.3977432251, 39.9078927749] //地图中心点坐标值

});

以下为地图海量点标记的方法，如果只是想展示地图把一二步骤完成之后复制以上代码即可。

var data =[[116.3977432251, 39.9078927749]，[116.3977433351, 39.9078927749]，[116.3977433851, 39.9078927749]]; //海量点根据经纬度组成的数组

var style = [{

url: '../mass0.png', // 地图标记图标地址

anchor: new AMap.Pixel(6, 6), // 图标显示位置偏移量，基准点为图标左上角

size: new AMap.Size(11, 11) // 图标大小

}];

var mass = new AMap.MassMarks(data, { // 此类表示海量点类，利用该类可同时在地图上