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

第一步：

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

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

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=‘你申请的key’&plugin=AMap.MouseTool&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>

 

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

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

 <div id="container" class="map" tabindex="0" style="width:1180px; height:672px;"></div>

 

第三步：在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);

 });