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, { // 此类表示海量点类，利用该类可同时在地图上展示万级别的点

opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明

zIndex: 111, // 图层叠加的顺序值，0表示最底层。默认zIndex：5

cursor: 'pointer', // 指定鼠标悬停时的鼠标样式，自定义cursor，

style: style /* 用于设置点的样式，当点样式一致时传入StyleObject即可；当需要展示多种点样式时，

传入StyleObject的数组，此时需要为Data中每个元素指定 style字段为该元素要显示

的样式在StyleObject数组中的索引*/

});

marker = new AMap.Marker({content: ' ', map: map}); //Marker点标记

// 将 massMarks 添加到地图实例

mass.setMap(map);

// 可以添加图标的点击事件

mass.on('click', function (e) {

// console.log(e);

});