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

 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() {})

最终实现效果为

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