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);

 });