Question

我将需要在同一页面上至少有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>

Answer 1

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

从 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对象具有每种地图类型的数组。

干杯。

如何在一个页面上获得多个地图？

1 个答案: