3

我将需要在同一页面上至少有 3 张地图（一张在另一张下方，而不是并排），每张地图都包含多个标记。谁能告诉我如何在同一页面上获得三个版本（之后我可以修改每个版本的详细信息）？我基本上在这里感觉自己的方式，对javascript知之甚少。

非常感谢 - 罗杰

<div id="map" style="height:400px;width:541px;display:block;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function mapIt(){

    var latlng = new google.maps.LatLng(24.00, 0.00);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById('map'), myOptions);
    setMarkers(map, places);
}

var places = [
        ['London',51.50, -0.125,"Markers/green.png"],
        ['Abidjan',5.34, -4.03,"Markers/red2.png"],
        ['Abu Dhabi',24.47, 54.37,"Markers/red2.png"],

];

var popUps = [
        '<strong>London</strong><br />link to larger map',
        '<strong>Abidjan, Ivory Coast</strong><br />Content here',
        '<strong>Abu Dhabi, United Arab Emirates</strong><br />Content here>',


    ]


var infowindow;
function setMarkers(map, locations) {

     for (var i = 0; i < places.length; i++) {
        var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
        var icon = locations[i][3];
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,  
            title: locations[i][0],
            icon: icon
        });
        (function(i, marker) {
            google.maps.event.addListener(marker,'click',function() {
                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }
                infowindow.setContent(popUps[i]);
            infowindow.open(map, marker);
            });
        })(i, marker);
     }
};
mapIt();
</script></div>
4

1 回答 1

3

我几分钟前创建的代码显示了如何在同一页面中设置四个地图。

从JS Fiddle看到它

它基本上归结为为地图设置正确数量的 div 元素：

<div id="map0"></div>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>

并初始化它们：

var map0 = new google.maps.Map(document.getElementById("map0"), mapOptions);
var map1 = new google.maps.Map(document.getElementById("map1"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map2"), mapOptions);
var map3 = new google.maps.Map(document.getElementById("map3"), mapOptions);

编辑：

我更新了示例以将标记添加到以下类型的对象，以便根据您要处理的地图标记更容易访问它们。

var markers = {
          'map0' : [],
          'map1' : [],
          'map2' : [],
          'map3' : [],
      };

它应该将以下调试信息打印到 javascript 控制台：

Marker is: (60.12816100000001, 18.643501000000015) map name is: map0
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (61.92410999999999, 25.748151000000007) map name is: map1
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (32.7151137, -117.15665719999998) map name is: map2
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (35.86166, 104.19539699999996) map name is: map3
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)

因此，在我提供的示例中，我只为每个地图添加一个标记，但可以添加任意数量的标记，因为markers对象对每种地图类型都有数组。

干杯。

于 2013-03-14T17:32:57.553 回答