高德地图实现（附案例）

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

实现效果：

8.点击展示弹框

marker.on('click', function (ev) {
    // 信息窗体的内容
    this.infoWin = new AMap.InfoWindow({
        autoMove: false,
        isCustom: true,  //使用自定义窗体
        offset: new AMap.Pixel(10, -10),
        content:'<div class="name">'+me.location_data[i].name+'</div>'
    });
    var x = ev.pixel.x;
    var y = ev.pixel.y;
    var lngLat = map.containerToLngLat(new AMap.Pixel(x, y));
    this.infoWin.open(map, lngLat);
});

实现效果：

源码地址：https://github.com/myweiwei/vue-
此项目其他功能可参考：https://segmentfault.com/a/11...

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