来来来，用高德地图实现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