javascript - 无法成功根据位置参数显示 bing map 并在标识的位置添加图钉

Question

我希望使用位置参数在 bing map 上显示图钉。我成功从 BingMap Autosuggest REST API 获取这些参数。然后，我希望使用这些参数(尤其是经度和纬度)在 Bing map 上显示位置，并用图钉指示位置。

以下是我已经尝试过的:

HTML:

    <input type="text" id="longitude" value="@Model.PointLongitude" />
    <input type="text" id="latitude" value="@Model.PointLatitude" />
    <input type="text" id="address" value="@Model.AFormattedAddress" />
    <input type="text" id="locality" value="@Model.ALocality" />

    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

脚本:

    <script type='text/javascript'>
function GetMap() {
    alert("bonjour eunice");
    var longitude = document.getElementById('#longitude');
    var latitude = document.getElementById('#latitude');
    var locality = document.getElementById('#locality');
    var address = document.getElementById('#address');

    var map = new Microsoft.Maps.Map('#myMap', {
        credentials: 'Bing Map API key',
        center: new Microsoft.Maps.Location(longitude, latitude)
    });

    var center = map.getCenter();

    //Create custom Pushpin
    var pin = new Microsoft.Maps.Pushpin(center, {
        title: address,
        subTitle: locality,
        text: 'Here',
        color: 'blue'
    });

    //Add the pushpin to the map
    map.entities.push(pin);
}
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>

当我执行代码时，我成功在输入字段中显示参数，但没有显示 map ，也没有显示图钉。

请帮我指出我做错了什么。

Answer 1

问题在于 document.getElementById() ，它会为您获取对象，而不是输入字段的值。

$(window).on('load', function() {
  
      var longitude =  document.getElementById('longitude').value;
      var latitude =  document.getElementById('latitude').value;
      var locality =  document.getElementById('locality').value;
      var address =  document.getElementById('address').value;

      var mapCentre = new Microsoft.Maps.Location(longitude, latitude);
      var map = new Microsoft.Maps.Map('#myMap', {
        credentials: 'Bing Map API key',
        center: mapCentre
      });

      var center = map.getCenter();

      //Create custom Pushpin
      var pin = new Microsoft.Maps.Pushpin(center, {
        title: address,
        subTitle: locality,
        text: 'Here',
        color: 'blue'
      });

      //Add the pushpin to the map
      map.entities.push(pin);
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="longitude" value="52.029232" />
<input type="text" id="latitude" value="5.107351" />
<input type="text" id="address" value="Vleugelboot 48" />
<input type="text" id="locality" value="Houten" />

<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
<script src='https://www.bing.com/api/maps/mapcontrol' async defer ></script>