Google maps 从一个代码块生成两个Google地图

我已经在这个网站上看到了关于这个主题的讨论，并且我已经尽可能地密切地关注了提议的代码，没有运气。有人能告诉我下面的代码是否有被修复的机会，或者它是否违反了谷歌的基本法律？它试图做的是在同一页面上使用一个矩形数组，使用相同的地理位置代码来定位表示用户位置的标记。我提供了两组选项，因为两张地图的缩放、居中和功能不同（显示每个地图的div大小也不同）。第一张地图缩放到街道级别，用户的位置在中间；第二个是以中心为中心的宽视图，以便显示矩形层的完整范围以及用户在地图上的位置。这比我看到的示例要复杂一些，所以可能它无法工作，我只需要有两个完全独立的代码块。但是，如果必须重复完整的矩形数组代码，那将是一个遗憾

谢谢你的建议

<script src="http://maps.google.com/maps/api/js?sensor=false">
</script><script type="text/javascript">
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var coords = new google.maps.LatLng(latitude, longitude);
    var map,map2;
    var mapOptions1 = {
        zoom: 16,
        center: coords,
        draggable: false, 
        zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var mapOptions2 = {
        zoom: 5,
        center: new google.maps.LatLng(0, 0),
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("mapContainer1"), mapOptions1);
        map2 = new google.maps.Map(document.getElementById("mapContainer2"), mapOptions2);
 var marker = new google.maps.Marker({
                position: coords,
                map: map,map2

                           });
 marker.setIcon('sites/default/files/YourLocation_0.png')
 var rectangles = [];

rectangles[0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
rectangles[1]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aa, bb),new google.maps.LatLng(xx, yy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example2.com',
clickable: true
});
rectangles[2]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aaa, bbb),new google.maps.LatLng(xxx, yyy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example3.com',
clickable: true
});

if（navigator.geolocation）{navigator.geolocation.getCurrentPosition（函数（位置））{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
var coords=new google.maps.LatLng（纬度、经度）；
var图，map2；
变量映射选项1={
缩放：16，
中心：coords，
可拖动：错误，
动物控制：错误，
滚轮：错误，
禁用双击缩放：真，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
变量映射选项2={
缩放：5，
中心：新google.maps.LatLng（0,0），
mapTypeControl:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“mapContainer1”），mapOptions1）；
map2=新的google.maps.Map（document.getElementById（“mapContainer2”），mapOptions2）；
var marker=new google.maps.marker({
职位：coords，
地图：地图，地图2
});
marker.setIcon（'sites/default/files/YourLocation_0.png'））
var矩形=[]；
矩形[0]=新的google.maps.Rectangle({
边界：新的google.maps.LatLngBounds（新的google.maps.LatLng（a，b），新的google.maps.LatLng（x，y）），
地图：地图，地图2，
不透明度：0，
笔划不透明度：0，
网址：'http://example.com',
可点击：正确
});
矩形[1]=新的google.maps.Rectangle({
边界：新的google.maps.LatLngBounds（新的google.maps.LatLng（aa，bb），新的google.maps.LatLng（xx，yy）），
地图：地图，地图2，
不透明度：0，
笔划不透明度：0，
网址：'http://example2.com',
可点击：正确
});
矩形[2]=新的google.maps.Rectangle({
边界：新的google.maps.LatLngBounds（新的google.maps.LatLng（aaa，bbb），新的google.maps.LatLng（xxx，yyy）），
地图：地图，地图2，
不透明度：0，
笔划不透明度：0，
网址：'http://example3.com',
可点击：正确
});

[……更多的矩形……]

for ( i = 0; i < rectangles.length; i++ ){google.maps.event.addListener(rectangles[i], 'click', function() {window.location.href = this.url;
});
}

layer.setMap(map);
layer.setMap(map2);
    });
}else {
    alert("Geolocation API is not supported in your browser.");
}

for（i=0；i

这不起作用：

rectangles[0]=new google.maps.Rectangle({
  bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
  map:map,map2,
  fillOpacity: 0,
  strokeOpacity: 0,
  url: 'http://example.com',
  clickable: true
});

您需要为每个贴图创建一个单独的矩形（该矩形一次只能在一个贴图上），类似于这样（这将创建一个二维数组，[1]用于贴图，[2]用于贴图2）：

---

这不是违法，但根本不起作用。单个矩形不能同时显示在多个贴图上，您必须为每个贴图创建单独的矩形。代码中没有什么问题。for循环中的

addListener（）

将导致关闭问题。什么是layer.setMap（）中的

layer

？哦，是的……很好。我在没有

侦听器的情况下尝试了它（只是想看看它是否会绘制两张地图），也没有幻影
层，但仍然没有成功。看来@DrMolle是对的。谢谢！我现在得到了两张地图，它们具有正确的地理位置和标记位置，但是缺少矩形层。我不熟悉数组-我需要做些什么吗：
var-rectangles=[]？我认为唯一可能出错的地方是循环：
for（I=0；I
谢谢。更近一步。通过更改为：
var rectangles=[0,1,2,3,4,5,6,7,8,9,10,11,12,13]；
。谢谢@geocodezip！现在我只需要解决for循环中的闭包问题，因为单击侦听器不工作。有什么建议吗？谢谢。这是另一个问题，在这个问题中没有关于单击侦听器的参考。
rectangles[1][0]=new google.maps.Rectangle({
  bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
  map:map,
  fillOpacity: 0,
  strokeOpacity: 0,
  url: 'http://example.com',
  clickable: true
});

rectangles[2][0]=new google.maps.Rectangle({
  bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
  map:map2,
  fillOpacity: 0,
  strokeOpacity: 0,
  url: 'http://example.com',
  clickable: true
});