RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
你可能遇到了下面的问题
关闭右侧工具栏
小程序地图开发应用案例-货柜地图
  • 作者:
  • 发表时间:2019-07-31 10:09
  • 来源:未知
小程序地图开发案例-货柜地图
客户需求如下
1、通过小程序地图展示客户的货柜分布展示在地图上
2、货柜几千个,需要拖动动态加载到地图上
3、保持地图展示流畅
4、可搜索定位


开发如下
以下是主要地图界面


这里用到 了小程序的组件
wxml主要代码如下
<map
id="myMap"
style="width: 100%; height:100vh"
longitude="{{center.longitude}}"
latitude="{{center.latitude}}"
scale="{{mapScale}}"
subkey="key"
polyline="{{polyline}}"
markers="{{markers}}"
bindregionchange="regionchange"
show-location
show-compass="true"
controls="{{controls}}"
bindcontroltap="controltap"
bindmarkertap="markertap"
>
</map>


js代码
这里用到了
qqmap-wx-jssdk.js的sdk
调用地址解析接口
qqmapsdk.geocoder({
//获取表单传入地址
address: _this.data.keyword,
success: function (res) {//成功后的回调
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
//根据地址解析在地图上标记解析地址位置
_this.setData({ // 获取返回结果,放到markers及poi中,并在地图展示
 
center: { //根据自己data数据设置相应的地图中心坐标变量名称
latitude: latitude,
longitude: longitude
}
});
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
})


}


后端 根据当前的经纬度 查询屏幕内的货柜
php代码如下
public function getMap(Request $request){
        $lat = $request->lat;
        $lng = $request->lng;
 
        $squares = $this->returnSquarePoint($lng, $lat);
        $info_sql = "select c_id,c_latitude,c_longitude from `clt_counter` where c_latitude<>0 and c_latitude>{$squares['right-bottom']['lat']} and c_latitude<{$squares['left-top']['lat']} and c_longitude>{$squares['left-top']['lng']} and c_longitude<{$squares['right-bottom']['lng']} "; 
 
        $data = DB::select('select c_id,c_latitude,c_longitude from clt_counter where c_latitude<>0 and c_latitude>? and c_latitude<? and c_longitude>? and c_longitude<?', [$squares['right-bottom']['lat'],$squares['left-top']['lat'],$squares['left-top']['lng'],$squares['right-bottom']['lng']]);
 
        return response()->json([
                'data' => $data,
                'code' => 2000
        ]);
 
 
 
 
    }
 
     /**
     *计算某个经纬度的周围某段距离的正方形的四个点
     *
     *@param lng float 经度
     *@param lat float 纬度
     *@param distance float 该点所在圆的半径,该圆与此正方形内切,默认值为0.5千米
     *@return array 正方形的四个点的经纬度坐标
     */
     function returnSquarePoint($lng, $lat,$distance = 0.5){
 
        $dlng =  2 * asin(sin($distance / (2 * 6371)) / cos(deg2rad($lat)));
        $dlng = rad2deg($dlng);
        
        $dlat = $distance/6371;
        $dlat = rad2deg($dlat);
        
        return array(
            'left-top'=>array('lat'=>$lat + $dlat,'lng'=>$lng-$dlng),
            'right-top'=>array('lat'=>$lat + $dlat, 'lng'=>$lng + $dlng),
            'left-bottom'=>array('lat'=>$lat - $dlat, 'lng'=>$lng - $dlng),
            'right-bottom'=>array('lat'=>$lat - $dlat, 'lng'=>$lng + $dlng)
        );
     }


具体实现细节可咨询客服