由于论文需要从百度地图上获取部分数据,所用用到百度地图JavaScript api 出现问题
问题:
在对兴趣点(根据给定经纬度生成)进行范围搜索时,所得到的结果与兴趣点并不匹配,百度到的结果说是由于百度地图是异步解析造成的。
本人现学现用js不是很熟悉,特此请教大神,谢谢。附代码(主要是测试用的)
<html>
<head>
<title>批量获取建成环境数量数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--让页面以正常比例显示并且禁止用户缩放页面的操作-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--调用百度API接口-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=LCvREYhTrmKYPPcjIx08XVqX" type="text/javascript"></script>
<!--设置页面的显示样式-->
  <style type="text/css">
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{height:500px;width:100%;}
    #r-result{width:100%; font-size:14px;}
  </style>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" value="搜索" onclick="xunhuan()" /></br>
    搜索结果:<textarea id="result" cols=50 rows=10></textarea>
  </div>
<script type="text/javascript">
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(121.480237,31.2363),15);
  map.enableScrollWheelZoom(true);
//search 搜索函数,设定中心点坐标(mCenter),搜索内容(酒店),搜索半径(1000),通过百度地图JavaScript Api的类和方法,获取感兴趣内容的数量;
  function search(lon,lat){
      //经度lon,纬度lat,BMap.Point(百度地图定义)生成点
      var mCenter = new BMap.Point(lon,lat);        //BMap.LocalSearch(百度定义)生成一个实例local;
      var local = new BMap.LocalSearch(mCenter,{renderOptions:{map:map,autoViewport: false},onSearchComplete:myFun});
      //local实例调用searchNearby方法(百度定义)
          local.searchNearby('酒店',mCenter,1000);
      //函数myFun(),获取感兴趣对象的数量p
      function myFun(){
          //getResults().getNumPois()都是百度地图定义
          var p = local.getResults().getNumPois(); 
          document.getElementById("result").innerHTML += p+'\n';
          //问题就在这,p无法return,所以我只能通过document.getElementById或者alert()呈现在页面上
          console.log(p);
      }    }
//search函数在搜索一个点的时候,没问题
//但是当我想利用循环搜索多个点的时候,得到的结果和坐标不匹配,运行10次,得到10个不同的数列
  var adds = [
        {name: "莘庄",lon:121.391623,lat:31.116581},{name: "外环路",lon:121.399814,lat:31.126929},
        {name: "莲花路",lon:121.409334,lat:31.136734},{name: "锦江乐园",lon:121.42068,lat:31.148312},
        {name: "上海南站",lon:121.4367085,lat:31.1604175},{name: "漕宝路",lon:121.441499,lat:31.174518},
        {name: "上海体育馆",lon:121.443408,lat:31.1888225},{name: "徐家汇",lon:121.4434557,lat:31.20076567},
        {name: "衡山路",lon:121.45316,lat:31.211335},{name: "常熟路",lon:121.4566255,lat:31.219974}
        ];
  function xunhuan(){
      //数组adds中存放着10个点,包括名称、经度、纬度;
      
      //利用循环对数组adds进行遍历,生成10个点,并调用search()函数对这个10个点搜索
      for(i = 0;i<adds.length;i++){
          var lon = Number(adds[i].lon);
          var lat = Number(adds[i].lat);
          search(lon,lat);
        }
  }</script>
</body>
</html>

解决方案 »

  1.   

    异步要居于回掉使用异步返回的值,无法直接return,没用
            function search(lon, lat,callback) {
                var mCenter = new BMap.Point(lon, lat);
                var local = new BMap.LocalSearch(mCenter, { renderOptions: { map: map, autoViewport: false }, onSearchComplete: myFun });
                local.searchNearby('酒店', mCenter, 1000);
                function myFun() {
                    var p = local.getResults().getNumPois();
                    callback(p)
                }        }
            function xunhuan() {
                for (i = 0; i < adds.length; i++) {
                    var lon = Number(adds[i].lon);
                    var lat = Number(adds[i].lat);
                    search(lon, lat, function (p) {
                       alert(JSON.stringify(p))                }
    );
                }
            }Web开发学习资料推荐
    JavaScript apply与call的用法意义及区别
    javascript生成二维码