Question

我正在开发一个SPA项目（离子，因此它与ui-router成角度），我需要在两个不同的页面/控制器上显示两个不同的地图。

第一张地图是一张普通地图（我们称之为主地图），其中标记了几个地点，第二张地图（让我们称之为编辑地图）是一个焦点在用户可以编辑位置的特定位置通过拖动标记。

我正在使用的一般实现方案是我从mappingService调用initMap方法，该方法从每个控制器实现谷歌地图。

$ rootScope.markers = [];

this.initMap = function initMap(mapTarget, mapCenter) {
  // the initMap function initialize the map it takes two arguments:
  //  + mapTaget which defines the html element the map is bound to.
  //  + mapCenter that defines the center of the map and whether to display the center

  var markup = "<div id='" + mapTarget.mapId + "'></div>";
  document.getElementById(mapTarget.containerId).innerHTML = markup;

  var centerPos = new google.maps.LatLng(mapCenter.lat, mapCenter.lng);

  $rootScope.map = new google.maps.Map(document.getElementById(mapTarget.mapId), {
    center: centerPos,
    zoom: 18,
    disableDefaultUI: true
  });

  // eventually place a person marker for the user's position
  if (mapCenter.display) {
    console.log('placing the position marker');
    $rootScope.markers[0] = new google.maps.Marker({
      position: {lat: mapCenter.lat, lng: mapCenter.lng},
      map: $rootScope.map,
      title: 'userLocation',
      icon: './img/person_icon.png'
    });
  }
};

唯一的区别是在主地图上我首先调用geolocate服务返回一个promise并且我使用返回的位置坐标然后调用映射服务：

geolocateService.getLocalPosition()
        .then(function(coords) {
          mappingService.initMap(
            {containerId: $scope.mapContainer, mapId: $scope.mapId},
            {lat: coords.lat, lng: coords.lng, display: true}
          );

在编辑地图上，我直接调用地图服务。

mappingService.initMap(
  {containerId: $scope.mapContainer, mapId: $scope.mapId},
  {lat: $scope.location.lat, lng: $scope.location.lng, display: false}
);

我能够毫无问题地渲染这两个地图，甚至可以添加标记和一些事件监听器。

然而，我遇到的问题是，经过一些动作序列，例如从主地图到编辑地图两次，其中一个地图会突然变成空白（白色是完全一样的，所以它不会似乎是我可以通过调整地图来解决的问题）。我收到了Ag对象，唯一的区别是我没有在破碎的地图上获得mapDataProviders属性。

当它工作时，我得到：

Ag object when it works

当它没有时，我得到：

Ag object when it doesn't work

上面的代码片段是我上次的实施尝试。我一直试图从很多不同的方式实现这些地图无济于事。在这些尝试中，我尝试过：

完全分离两个instanciation，将initMap方法划分为initMainMap和initEditMap。
为两个地图使用一个实例并替换DOM元素＆gt;以上是您在离开视图时调用的以下附加方法：

this.removeMap = function removeMap（containerId）{ var container = document.getElementById（containerId）; $ rootScope.markers = []; container.innerHTML =''; // 重要部分： var old_element = container; var new_element = old_element.cloneNode（true）; old_element.parentNode.replaceChild（new_element，old_element）;

删除$ rootScope.map; }

知道我在两个视图中都有：

或

<div id="edit-map-container"></div>

我正在尝试了解什么会让谷歌地图API返回没有mapDataProvider的地图（我相信这意味着地图可以工作，甚至开始渲染，只是它缺少要显示的切片）。

P.S。看起来有内存泄漏，这显然是一个众所周知的问题。

如果有人对此有答案，我就在这里有点迷失了！

什么会使Google地图Ag对象返回而没有mapDataProvider？

0 个答案: