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

时间:2012-12-15 03:49:44

标签: google-maps google-maps-api-3

我在这个网站上看过关于这个主题的讨论,并且我已经尽可能地遵循了提议的代码而没有运气。任何人都可以告诉我,如果下面的代码有任何机会被修复,或者它是否违反了Google的基本法律?它试图做的是使用一个矩形数组在同一页面上使用相同的地理位置代码在两个地图上定位代表用户位置的标记。我提供了2组选项,因为两个地图的缩放,中心和功能是不同的(因为显示每个地图的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
});

[.....更多矩形....]

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.");
}


1 个答案:

答案 0 :(得分:0)

这不起作用:

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]代表map,[2]代表map2):

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
});