高德地图在h5项目中的集成（点标记）

关于高德地图在项目中的集成，网上已经有不少相关的很优秀的文章了，故本篇内容仅用于参考和巩固。

 1.使用高德地图以前须要在高德开放平台(https://lbs.amap.com/dev/index)建立一个key

有这个key以后就能够进行开发了。

2.在项目中引入外部文件，将连接中的key替换本身的key就能够了

3.在文件中添加div标签座位容器，添加div的指定id属性

4，准备加载地图，加载地图有多种方法，详情请参考https://lbs.amap.com/api/javascript-api/guide/abc/load，本文中咱们仅使用顺序同步加载，这种方式下，地图初始化的代码要放在 JS API 的脚本标签以后：

5.因为本次项目中要实现的效果是多种点标记，咱们在生成标记点时，对数据源进行筛选，不一样类型的点对应不一样的图标，

先定义空数组var markers = [];将循环生成的点标记数据放进数组中，就会生成对应的不一样标记类型的点（在生成标记时能够设置标记点的一些属性，根据本身的须要进行设置，详情参考https://lbs.amap.com/api/javascript-api/guide/overlays/marker）

 

6.若是须要初始化的时候视野内出现全部的标记点，可使用map.setFitView();方法,反之则不须要

7.由于本次项目还涉及到简单的定位，因此使用了插件AMap.Geolocation，使用此插件时须要注意请求须要为https,不然会报错

 

引入插件时能够设置定位的一些细节显示，根据须要设置，详情参考https://lbs.amap.com/api/javascript-api/guide/services/geolocation

因为本次项目只涉及简单定位，因此简单的设置了一下，咱们在得到定位之后可使用map.setZoomAndCenter(num, lng, lat])来设置缩放级别和中心点经纬度

须要注意的是AMap.Geolocation定位是异步，一些处理方法能够写在回调中

当页面中涉及到地图相关的点击事件事，可使用如下方法进行监听

 AMap.event.addDomListener(document.getElementById('positionIcon'), 'click', function() {}）

最终实现效果为

 本文是一些简单的使用，具体的用法还需参考官网