vue element adminvue⾼德地图标记_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);
// 可以添加图标的点击事件
<('click', function (e) {
// console.log(e);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。