高德地圖實現（附案例）

需求：基於高德地圖實現地圖展現
實現步驟：
1.首先註冊登陸並建立一個應用

2.建立應用後添加key，獲取key值。此案例爲web端（JS）

3.引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>

4.添加div標籤做爲地圖容器，同時爲該div指定id屬性；
並經過css定義寬高。

<div id="container"></div>
#container {
    width:300px; height: 180px; 
}

5.建立地圖

window.onLoad  = function(){
    var map = new AMap.Map('container', {
        zoom:6,//級別
        center: [116.397428, 39.90923],//中心點座標
        pitch:45,//視角
        viewMode: '3D',//開啓3D視圖,默認爲關閉
        resizeEnable: true, //是否監控地圖容器尺寸變化
        features: ["bg", "road", "point"], //隱藏默認樓塊
        mapStyle: "amap://styles/3484ce5283d8486fa3df43a67cecb8e0", //設置地圖的顯示樣式
    });          
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你得key&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

6.mapStyle爲在線上定義好的樣式
https://lbs.amap.com/dev/maps...
定義好後上傳，而後把地址寫上就能夠啦

7.地圖標點

數據：

location_data: [  // 地圖標點
    {
      "name": "應用企業1",  // 企業名稱
      "alert_num": 5555,  // 告警數量
      "info": {
          "location": "xxx",  // 企業地址
          "coord": [118.88, 28.97],
          "contact": {
              "name": "xx",  // 聯繫人
              "phone": "15022222222"  // 手機號
          }
      }
    },
    {
      "name": "應用企業1",
      "alert_num": 555,
      "info": {
          "location": "xxx",
          "coord": [116.7, 39.53],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    },
    {
      "name": "應用企業1",
      "alert_num": 55,
      "info": {
          "location": "xxx",
          "coord": [115.480656, 35.23375],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    },
    {
      "name": "應用企業1",
      "alert_num": 112,
      "info": {
          "location": "xxx",
          "coord": [117.27, 31.86],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    },
    {
      "name": "武漢鋼鐵（集團）公司",
      "alert_num": 332,
      "info": {
          "location": "xxx",
          "coord": [86.06,41.68],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    },
   {
      "name": "鞍山鋼鐵集團有限公司",
      "alert_num": 222,
      "info": {
          "location": "xxx",
          "coord": [125.03, 46.58],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    },
    {
      "name": "唐山鋼鐵有限公司",
      "alert_num": 444,
      "info": {
          "location": "xxx",
          "coord": [111.65,40.82],
          "contact": {
              "name": "xx",
              "phone": "15022222222"
          }
      }
    }
]

實現效果：

源碼地址：https://github.com/myweiwei/vue-
此項目其餘功能可參考：https://segmentfault.com/a/11...

將不斷更新完善，期待您的批評指正！