Question

我正在尝试在离子v1框架应用程序中使用Bing maps API，该应用程序基于android，iOS和Windows平台构建。

我在Bing地图中遇到问题，正在正确绘图，但放大，缩小，将地图类型从天线更改为道路＆amp;获取当前位置这些按钮不起作用。我有适当的API密钥来访问地图。我甚至尝试在浏览器上执行 ionic serve ，但没有任何帮助。

我已按照以下链接中的代码： https://github.com/eppineda/ionic.bing-map-demo

我还在index.html页面中更改了bing map的JS src文件：的 SRC =＆＃39; http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0＆＃39;

要

SRC =＆＃39; http://www.bing.com/api/maps/mapcontrol＆＃39;

src文件我已更改引用Microsoft文档页面如下：的 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);

};

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

Answer 1

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

Ionic v1 Framework中的Bing地图不起作用

1 个答案: