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