Ionic v1 框架中的 Bing 地图不起作用答案

【问题标题】：Bing Maps in Ionic v1 Framework is not workingIonic v1 框架中的 Bing 地图不起作用
【发布时间】：2017-04-05 02:50:48
【问题描述】：

我正在尝试在基于 android、iOS 和 Windows 平台的 ionic v1 框架应用程序中使用 Bing 地图 API。

我在正确绘制的 Bing 地图中遇到问题，但 放大、缩小、将地图类型从空中更改为道路以及获取当前位置这些按钮不起作用。我有适当的 API访问地图的关键。我什至尝试在浏览器上执行 ionic serve，但没有任何帮助。

我遵循了以下链接中的代码： https://github.com/eppineda/ionic.bing-map-demo

我还更改了 index.html 页面中 bing 地图的 JS src 文件： src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'

到

src='http://www.bing.com/api/maps/mapcontrol'

我已更改参考 Microsoft 文档页面的 src 文件如下： http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#loadMapAsync+HTML

问题可以在链接中看到 - http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview

$scope.init = function () {
  console.log('Map init');

  var mapOptions = {
    credentials: '',
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    center: new Microsoft.Maps.Location(51.5033640, -0.1276250),
    zoom: 15,
    // showLocateMeButton: false,
    // // NavigationBarMode: "default",
    // // NavigationBarOrientation: "vertical",
    // showZoomButtons: false,
    // ShowNavigationBar: false
    showDashboard: true
    // // showMapTypeSelector : true
    // // showMapTypeSelector: false
    // navigationBarMode: Microsoft.Maps.NavigationBarMode.compact

  };
  map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions);
  console.log(map);

};

请帮我解决这个问题。这对解决方案非常有帮助。提前致谢。

【问题讨论】：

您能否提供更多信息。您所说的新地图 URL 中没有回调参数，因此与您指向的异步示例不一致。地图正在加载，您可以看到导航栏吗？问题主要是与地图交互吗？平移有效吗？你能提供任何代码吗？
当我在 ionic 上运行它时，一旦调用 deviceready 函数，我就会使用控制器初始化地图。我能够看到带有位置的导航栏，放大和缩小按钮，但这些按钮不起作用。
下面是我的控制器代码： $scope.init = function () { console.log('Map init'); var mapOptions = { credentials: 'my api key here', mapTypeId: Microsoft.Maps.MapTypeId.road, center: new Microsoft.Maps.Location(51.5033640, -0.1276250), zoom: 15 } map = new Microsoft.Maps.Map (document.getElementById('divMap'), mapOptions); };
您可以通过触摸/捏合移动地图吗？
是的，我可以缩放和平移地图。

标签： javascript angularjs cordova ionic-framework bing-maps

【解决方案1】：

我怀疑存在两个问题之一。首先是地图和/或导航栏/按钮上方有一些其他 HTML 元素。这将阻止您按下这些按钮。第二个是您的代码实际上以某种方式加载了两次地图，因此您以两张地图彼此重叠结束。发生这种情况时，底部地图的导航栏最终位于顶部，使用它实际上会更改底部隐藏的地图。我曾经在其他人的应用程序中看到过这种情况发生过一次，他们将地图两次加载到同一个 div 中。

【讨论】：

我正在使用 ionic 框架，可能不确定地图的包装功能。我没有得到 ionic 人的任何回复。
有什么方法可以检查我的地图是否被绘制了两次？
作为快速而肮脏的检查，在地图加载代码所在的位置添加警报。如果警报被触发两次，则地图加载函数在某处被调用两次。
只有在我使用控制台检查您所说的方式后，我的地图才会被初始化。
那么不确定。刚刚下载了您在 GitHub 上指向的示例，更新了地图脚本 URL，它就可以正常工作了。