Не удается отобразить карту Bing из параметров местоположения и добавить метку в указанном месте - PullRequest
Новая
       6

Не удается отобразить карту Bing из параметров местоположения и добавить метку в указанном месте

0 голосов
/ 04 февраля 2019

Я хочу отображать кнопки на карте Bing, используя параметры местоположения.Мне удалось получить эти параметры из API REST BingMap Autosuggest.Затем я хочу использовать эти параметры (особенно долготу и широту), чтобы отобразить местоположение на карте 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>

Когда я выполняю код, мне удается отобразить параметры в полях ввода, но карта и кнопка не отображаются.

Пожалуйста, помогите мне указать, что я делаю неправильно.

1 Ответ

0 голосов
/ 05 февраля 2019

Проблема заключается в 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>
...