0

我已经阅读了许多关于让多个谷歌地图显示在一个页面上的不同帖子，但似乎没有一个与我的代码相关，该代码使用谷歌地图 API V3。

我在同一页面上有 2 个 Google 地图，但在不同的选项卡中。我复制了 Map1 的代码并将其粘贴到第二个选项卡中以创建 Map2。然后，我更改了 Map2 的“var map”和“map_canvas”ID，但发布时，页面上仅显示 Map2。

我尝试了删除行的选项；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

从第二个选项卡开始，这样它就不会在同一页面上重复，但这不起作用。

该页面可以在这里查看：http: //tcchurch.com.au/table1/index.php/missions

两张不同的地图应该显示在“我们的传教士”和“国际合作伙伴”选项卡下。

任何帮助将不胜感激。谢谢。

伊恩

4

2 回答 2

2

你有重复的功能。那是行不通的，也给他们唯一的名字，或者有一个初始化函数来初始化两个地图。

function initialize() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
....
}

function initialize2() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), settings);
...
}
于 2013-05-16T04:37:15.310 回答
0

不仅给函数起不同的名字，而且给全局变量起不同的名字——在乞求时没有“var”的变量：

像这样将帖子ID分配给：“map”，“initialize”和“codeAddress”（不是超级干净但有效）：

var geocoder;
    var map;

    function codeAddress<? echo $post['Post']['id']; ?>() {
      var address = "<? echo h($post['Post']['address']); ?>, <? echo h($post['Post']['ZIP']); ?> <? echo $cities[$post['Post']['city_id']]; ?>";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map<? echo $post['Post']['id']; ?>.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map<? echo $post['Post']['id']; ?>,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

    function initialize<? echo $post['Post']['id']; ?>() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
        zoom: 14,
        center: latlng
      }
      map<? echo $post['Post']['id']; ?> = new google.maps.Map($('googleMap<? echo $post["Post"]["id"]; ?>'), mapOptions);
      codeAddress<? echo $post['Post']['id']; ?>()
    }   

    google.maps.event.addDomListener(window, 'load', initialize<? echo $post['Post']['id']; ?>);
于 2013-12-01T19:22:32.330 回答