Ionic v1框架中的必应地图不工作

Question

我正在尝试在ionic v1框架应用程序中使用必应地图API，该应用程序构建在android、iOS和windows平台上。

我在必应地图中遇到了问题，它可以正确地绘制地图，但放大、缩小、将地图类型从空中改为道路&获取当前位置这些按钮都不起作用。我有适当的API键来访问地图。我甚至尝试过在浏览器上做ionic服务，但没有任何帮助。

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

至

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

问题可在以下链接中查看：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);

};

请帮我弄清楚这一点，这对解决方案很有帮助。提前道谢。

Answer 1

我怀疑有两个问题之一。第一个是在地图和/或导航栏/按钮上面有一些其他HTML元素。这会阻止你按那些按钮。第二种情况是，您的代码实际上以某种方式加载了两次映射，这样，您就以两个相互叠加的映射结束了。当这种情况发生时，底部地图的导航栏会出现在顶部，使用它实际上会改变底部隐藏的地图。我以前见过这样的情况在别人的应用程序中发生过一次，他们将地图加载到同一个div中两次。