来来来，用高德地图实现ofo小黄车地图定位

1、直接上图，看看效果，拖动定位可重新加载附近小车位置

2、所用技术：高德地图API，es6的class、promise等

3.  下面来一步步说明下实现思路：

   （1）先初始化渲染高德地图，这里面用到两个高德地图比较重要的方法：

new PositionPicker ：拖拽定位

new AMap.Marker ： 多点渲染

   （2）初始化定位数据

用户的定位坐标：可由前端获取，传递给后端，或者由后端传入

自行车的坐标数组 ：由后端传入

   （3）如果用户拖拽定位杆，待拖拽结束后，将用户新坐标位置，发送给后端，重新获取周围自行车的坐标数组，代码示例一下重要过程

拖拽定位杆结束：

            // 拖动结束，成功获取用户选中的经纬度positionPicker.on('success', function(positionResult) {// 未能成功获取数据,退出函数if(!positionResult) return;document.getElementById('lnglat').innerHTML = positionResult.position;// 请求后台开始渲染自行车位置var bike = new Bike(positionResult.position.lng, positionResult.position.lat, map);bike.getBikePosition().then((data) => {if(data && data.length >= 1){bike.renderBike(data);}})});

    渲染自行车数组坐标时：

这里有一点需要注意：因为全局是用的一个map对象，所有每次重新渲染自行车坐标前，都是清除上次渲染的坐标，不然地图上面就会重叠

  renderBike(bikePositions = []) {// 清除上一次定位绘制的自行车点this.map.remove(markers);markers = [];bikePositions.forEach((bikePosition) => {let marker = new AMap.Marker({map: this.map,icon: bikePosition.icon,position: [bikePosition.lng, bikePosition.lat],offset: new AMap.Pixel(-12, -36)});markers.push(marker);}); }

   demo已经上传到github，感兴趣的小伙伴可以先去看看：https://github.com/chuanzaizai/ofo-map

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！