如何在 ionic 中使用新的 Lat Lng 绘制地图答案

【问题标题】：How to draw map using new Lat Lng in ionic如何在 ionic 中使用新的 Lat Lng 绘制地图
【发布时间】：2016-12-22 10:37:54
【问题描述】：

我将适当的纬度和经度传递给地图，但它显示的是旧地图，具有旧的 lat lng。我知道我在这方面做错了什么，但我无法弄清楚。我在离子框架和地图中的项目我正在使用这个插件map plugin

这是我的html代码

        <div style="width:100%;height:200px" id="mapDisplay"></div>

这是我的 angularJS 代码

var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;

var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
  'camera': {
    'latLng': myGeoLocation,
    'zoom': 15
  }
});

map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
  map.addMarker({
    'position': myGeoLocation,
    'title': address
  }, function(marker) {
    marker.showInfoWindow();
  });
});

【问题讨论】：

我认为 lat lng 是硬编码的。尝试使用真实值进行测试。
不，我正在传递动态值。我认为 div 不刷新
在此处输入一些已知的 latlng ......*const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);*
const myGeoLocation = new plugin.google.maps.L‌atLng(-19.9178713, -43.9603117);
还有同样的问题吗？

标签： angularjs cordova google-maps ionic-framework cordova-plugins

【解决方案1】：

来自您正在使用的地图插件的文档

这个插件使用 Map.getMap() 只生成一个地图实例方法。通常，您可能想要创建多个地图，但这插件不允许。

所以你的plugin.google.maps.Map.getMap 只是抓取现有实例，而不是创建一个新实例，plugin.google.maps.event.MAP_READY 只被触发一次，第一次。但是查看源代码，该实例似乎公开了一个 remove 方法，您可以使用该方法销毁现有实例并在调用回调时使用新的坐标集创建一个新实例，例如：map.remove(function() { /** reset map coordinates **/ }

** 额外的**

如果您只需要显示带有一组坐标的地图，您可以使用本机应用程序通过将纬度/经度传递给$cordovaInAppBrowser 插件来实现。作为 iOS 和 Android 的示例，您将拥有以下内容：

iOS

$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');

安卓

$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');

最后，您需要在 config.xml 中启用 geo uri，如下所示：

<allow-intent href="geo:*" />

【讨论】：

如果对您有任何帮助，请标记问题:)

【解决方案2】：

插件不允许创建多个地图实例More detail。

但是你可以通过使用这段代码来实现这一点

var map = plugin.google.maps.Map.getMap(div);
  map.clear();
  map.off();
  map.trigger("test");
  map.addEventListener(plugin.google.maps.event.MAP_READY);

【讨论】：