选择位置并使用必应地图API从城市名称中找到地图

时间:2018-08-02 11:30:40

标签: javascript php jquery api

我想将地图添加到我的php网站,并从城市名称中找到地图中的点。我使用BING地图绘制位置并尝试了一些代码。

我尝试了以下代码

<script type='text/javascript' 
        src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' 
        async defer></script>
<script type='text/javascript'>
var map, searchManager;

function GetMap() {
    map = new Microsoft.Maps.Map('#myMap', {
        credentials: 'AmfOk2xwWNj5kqDse3LKuOZoCUtgYfV_DJ17G6j7ob3GespTDhcd2Z5H1_4zoGgM'
    });

    //Make a request to geocode New York, NY.
  var query = ["Sichuan","Kassel, Germany","Yasuj, Iran","Tokyo, Japan","Riyadh, Saudi Arabia"];
    geocodeQuery(query);
}

function geocodeQuery(query) {
    //If search manager is not defined, load the search module.
    if (!searchManager) {
        //Create an instance of the search manager and call the geocodeQuery function again.
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
            searchManager = new Microsoft.Maps.Search.SearchManager(map);
            geocodeQuery(query);
        });
    } else {
         var searchRequest = {
        where: query,
        callback: function (r) {
         console.log(r);
            if (r && r.results && r.results.length > 0) {
                var pin, pins = [], locs = [], output = 'Results:<br/>';

                for (var i = 0; i < query.length; i++) {
                    //Create a pushpin for each result. 
                    pin = new Microsoft.Maps.Pushpin(r.results[i].location, {
                        text: i + ''
                    });
                    pins.push(pin);
                    locs.push(r.results[i].location);

                    output += i + ') ' + r.results[i].name + '<br/>';
                }

                //Add the pins to the map
                map.entities.push(pins);

                //Display list of results
                document.getElementById('output').innerHTML = output;

                //Determine a bounding box to best view the results.
                var bounds;

                if (r.results.length == 1) {
                    bounds = r.results[0].bestView;
                } else {
                    //Use the locations from the results to calculate a bounding box.
                    bounds = 
             Microsoft.Maps.LocationRect.fromLocations(locs);
                }

                map.setView({ bounds: bounds });
            }
        },
        errorCallback: function (e) {
            //If there is an error, alert the user about it.
            alert("No results found.");
        }
    };
         //Make the geocode request.
            searchManager.geocode(searchRequest);
      }
   }
 </script>

 <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
 <div id='output' style="margin-left:10px;float:left;"></div>

但是地图上只有几个位置。我需要绘制变量“ query”中给出的所有位置。请为我提供解决方案。

输出图如下所示, enter image description here

0 个答案:

没有答案