高德地图实现（附案例）

需求：基于高德地图实现地图展现
实现步骤：
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...

将不断更新完善，期待您的批评指正！