无法 运行 Bing 正确映射

Question

首先我为bing-地图使用了自动建议，但是当我为图钉添加代码时，它不能正确运行。控制台日志中有 2 个错误。我该如何修复它们？

<div id='myMap' style='width: 30vw; height: 30vh; '></div>
</div>
<div class="col-md-6">
  <div class="form-group form-md-line-input">
    <label class="col-md-4 control-label"> Maps
      <span class="required">*</span>
    </label>
    <div class="col-md-8" id='searchBoxContainer'>
      <input type="text" class="form-control price tx" id="searchBox" placeholder="maps" name="rent">
      <div id='printoutPanel'></div>
      <div id="pushpinDrag">drag</div>
      <div id="pushpinDragEnd">dragend</div>
      <div id="pushpinDragStart">dragstart</div>
      <div>Pin Location: <span id="pushpinLocation"></span></div>
      <span class="help-block"></span>
      <div class="form-control-focus"> </div>

    </div>
  </div>

  <script type='text/javascript'>
    var map;

    function GetMap() {
      map = new Microsoft.Maps.Map('#myMap', {});
      var center = map.getCenter();
      //Add a standard red pushpin that doesn't have dragging enabled.
      var redPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(center.latitude, center.longitude), {
        color: '#f00'
      });
      map.entities.push(redPin);
      //Add a green pushpin that has dragging enabled and events attached to it.
      var greenPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(center.latitude, center.longitude - 0.1), {
        color: '#0f0',
        draggable: true
      });
      map.entities.push(greenPin);
      Microsoft.Maps.Events.addHandler(greenPin, 'drag', function(e) {
        highlight('pushpinDrag', e);
      });
      Microsoft.Maps.Events.addHandler(greenPin, 'dragend', function(e) {
        highlight('pushpinDragEnd', e);
      });
      Microsoft.Maps.Events.addHandler(greenPin, 'dragstart', function(e) {
        highlight('pushpinDragStart', e);
      });
      //Add a blue pushpin that has dragging enabled but no events attached to it.

    }

    function highlight(id, event) {
      //Highlight the mouse event div to indicate that the event has fired.
      document.getElementById(id).style.background = 'LightGreen';
      document.getElementById('pushpinLocation').innerText = event.target.getLocation().toString();
      //Remove the highlighting after a second.
      setTimeout(function() {
        document.getElementById(id).style.background = 'white';
      }, 1000);
    }

    function loadMapScenario() {
      var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        /* No need to set credentials if already passed in URL */
        zoom: 12
      });
      Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function() {
        var options = {
          maxResults: 4,
          map: map
        };
        var manager = new Microsoft.Maps.AutosuggestManager(options);
        manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
      });

      function selectedSuggestion(suggestionResult) {
        map.entities.clear();
        map.setView({
          bounds: suggestionResult.bestView
        });
        var pushpin = new Microsoft.Maps.Pushpin(suggestionResult.location);
        map.entities.push(pushpin);
        document.getElementById('printoutPanel').innerHTML =
          'Suggestion: ' + suggestionResult.formattedSuggestion +
          '<br> Lat: ' + suggestionResult.location.latitude +
          '<br> Lon: ' + suggestionResult.location.longitude;
      }

    }
  </script>
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=mykey&callback=loadMapScenario' async defer></script>
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=mykey' async defer></script>

这是来自控制台日志的错误消息：

mapcontrol?callback=GetMap&key=mykey:15
 Uncaught TypeError: Cannot read property 'tryPointToLocation' of undefined
         at Function.n.getMapCenter (VM3716 6e96d723.js:1)
         at n.getCenter (VM3724 6a1a2339.js:1)
         at GetMap (eval at <anonymous> (jquery.min.js:2), <anonymous>:5:26)
         at Object.Microsoft.Maps.notifyMapReadyForBootstrap (mapcontrol?callback=GetMap&key=mykey:15)
         at VM3724 6a1a2339.js:1
         at VM3724 6a1a2339.js:1
     n.getMapCenter @ VM3716 6e96d723.js:1
     n.getCenter @ VM3724 6a1a2339.js:1
     GetMap @ VM3712:5
     Microsoft.Maps.notifyMapReadyForBootstrap @ mapcontrol?callback=GetMap&key=mykey:15
     (anonymous) @ VM3724 6a1a2339.js:1
     (anonymous) @ VM3724 6a1a2339.js:1
     6VM3737 Log:1 Uncaught TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function
         at VM3736 Log:1
     (anonymous) @ VM3737 Log:1

Answer 1

原因是你有 2 个 script 标签的 src 像 https://www.bing.com/api/maps/mapcontrol

<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=mykey&callback=loadMapScenario' async defer></script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=mykey' async defer></script>

删除其中之一并从一个回调中初始化所有需要的组件：

<script type='text/javascript'>
    var map;

    function GetMap() {
      map = new Microsoft.Maps.Map('#myMap', {});
      addPins();
      addAutoSuggest();
      /* etc. */
    }

    function addPins(){
      /* code for adding pins*/
    }

    function addAutoSuggest(){
      /*code for adding auto suggest*/
    }
</script>    
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=mykey' async defer></script>