3

同じページに少なくとも 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

数分前、同じページに 4 つのマップを設定する方法を示すコードを作成しました。

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)

したがって、私が提供した例では、マップごとに 1 つのマーカーのみを追加しますが、markersオブジェクトには各マップ タイプの配列があるため、好きなだけ追加します。

乾杯。

于 2013-03-14T17:32:57.553 に答える