可以从一个位置的参数显示冰地图不会成功，并在确定位置添加一个图钉

Question

我想用一个位置的参数一片冰心在地图上显示图钉。我在获得来自BingMap自动提示REST API这些参数的成功。然后我希望使用这些参数（特别是经度和纬度）到Bing地图上显示的位置，与指示的位置的推针。

下面是我已经尝试过：

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>

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

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

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>