首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >2谷歌地图相互冲突

2谷歌地图相互冲突
EN

Stack Overflow用户
提问于 2014-08-06 16:58:47
回答 1查看 340关注 0票数 1

我正在创建一个web应用程序,它有两个Google实例:一个有多个点,另一个只有一点。

它们似乎相互冲突,因为当我先看一页时,另一张地图的中心位置就不对了。

首页:

第二页:

下面是我的项目的链接:http://jakeserver.com/Apps/BostonLandmarks/B12/index.html

下面是生成Google地图的代码:

代码语言:javascript
复制
var detailsMap = new google.maps.Map(document.getElementById("map_" + this.id), {
  zoom: 10,
  center: new google.maps.LatLng(landmarkList[rowCount].landmarkGPSNorth, landmarkList[rowCount].landmarkGPSWest),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var detailsInfoWindow = new google.maps.InfoWindow();

var detailsMarker, j;

detailsMarker = new google.maps.Marker({
  position: new google.maps.LatLng(landmarksArray[rowCount].landmarkGPSNorth, landmarksArray[rowCount].landmarkGPSWest),
  map: detailsMap,
  icon: "Icons/red-pin.pdf"
});
detailsInfoWindow.setContent(landmarksArray[rowCount].landmarkName);
detailsInfoWindow.open(detailsMap, detailsMarker);

google.maps.event.addListener(detailsMarker, 'click', (function(detailsMarker, j) {
  return function() {
    detailsInfoWindow.open(detailsMap, detailsMarker);
  }
})(detailsMarker, j));
}

document.getElementById("map_" + this.id).style.height = 300 + "px";
document.getElementById("map_" + this.id).style.width = 300 + "px";

有什么想法吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-06 17:21:55

很久以前,我在一个网站中使用基于Ajax的导航时遇到了类似的问题,每个页面都有一张地图,第一个页面正常工作,但是下一个页面有相同的问题。

在显示地图之前,您应该创建一个新的绑定对象。就像这样:

代码语言:javascript
复制
var bounds = new google.maps.LatLngBounds();

在那之后。你必须扩大边界,通过你的标志位置。如下所示:

代码语言:javascript
复制
bounds.extend(marker.position);

最后,当地图实际上是可见的和呈现的时候。运行以下行。

代码语言:javascript
复制
google.maps.event.trigger(secondMapInstance, 'resize');
secondMapInstance.fitBounds(bounds);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25166019

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档