前端 - 百度地图测距与json数据的问题

问题描述

问 题

我现在有一堆店铺的地址，需要根据我当前的位置来测算距离，但是当只有一个店铺的时候，我可以轻松的测出来距离，但是当有一堆店铺的时候我应该怎么操作json数据呢？

想要得到的效果：

这是我的json数据：

{
"_data": [
{
"address": "北京市德胜门外双泉堡汽修一厂院内",
"name": "北京博瑞祥云汽车销售服务有限公司"
},
{
"address": "北京市丰台区丽泽路99号",
"name": "北京中润发汽车销售有限公司"
},
{
"address": "北京市朝阳区北四环东路太阳宫十字口甲1号",
"name": "北京德奥达汽车销售有限公司"
},
{
"address": "北京市海淀区紫竹院南路甲5号",
"name": "北京首汽腾迪汽车销售服务有限公司"
},
{
"address": "北京市朝阳区姚家园路东口甲一号东方基业国际汽车城",
"name": "北京联拓奥通汽车贸易有限责任公司"
}
],
"_no": 1000,
"_msg": "操作成功"
}

这是根据百度地图API写的测距代码（百度地图demo地址：http://lbsyun.baidu.com/jsdem...）：

// 初始化地图
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,15);
map.setCurrentCity("北京");

getLocation();//获取当前位置

function getLocation(){
    var location=new BMap.Geolocation();
    location.getCurrentPosition(nowGps);
}

var shop = "北京市丰台区永外大街车站路12号";//假设这就是其中一家店铺地址

function nowGps(result){

    //获取当前位置坐标
    var lng = result.point.lng;
    var lat = result.point.lat;
    var myPoint = new BMap.Point(lng, lat);

    var myGeo = new BMap.Geocoder();
    myGeo.getLocation(myPoint, getAddr);

    function getAddr(result){
        $("#nowcity").html(result.addressComponents.city);//将当前城市显示在页面上

        var output = "";
        var searchComplete = function (results){
            if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                return ;
            }
            var plan = results.getPlan(0);
            var output = plan.getDistance(true);

        }
        var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map,panel: "c", autoViewport: true},
            onSearchComplete: searchComplete,
            onPolylinesSet: function(){
                 $(".shop-distance").append(output);
            }});
        transit.search(result, shop);
    }
}

解决方案

transit.search("上地", "西单");
这里面的两个值从json遍历中得到放入即可
大概就是
$.each(json,function(index){

transit.search(json[index].posion1,json[index].posion2);

})
输出的文本(output)也是一样用变量拼接即可

这篇关于前端 - 百度地图测距与json数据的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！