0

複数のマーカーを含むマップがあります。このページは独立している必要があるため (外部ソースなし)、配列を作成できません。チェックボックス、プルダウン、またはスライダー コントロールを作成して、必要なマーカーのカテゴリをオン/オフできるように、各マーカーにインデックスを割り当てる必要があります。つまり、10 個のマーカーがあり、各カテゴリ (1-5) に 2 つあるとします。カテゴリ 1 と 3 を言い、他のものを遮断できるようにする必要があります。どうすればこれを簡単に行うことができますか? これらの指定されたグループを zoomTo するために関数に挿入できるコードを誰かが推奨できますか?

// Start of Marker8 (red - marker color)
var latLng8 = new google.maps.LatLng(34.18, 101.40);
var contentString8 = '<div id="content">'+
   '<p><b>Driving Directions</b><br>Enter your start address <form action="http://maps.google.com/maps" method="get" target="_blank">' +
    '<input type="text" size=20 maxlength=40 name="saddr" id="saddr" value="" /><br><br>' +
                '<input value="Get Directions to this place" type="submit">' +
                '<input type="hidden" name="daddr" value="XX.XX, -XX.XX"></p>'+    
                '</div>';
                var infowindow8 = new google.maps.InfoWindow({
                    content: contentString8
                });
                var marker8 = new google.maps.Marker({
                    position: latLng8,
                    icon: src = 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
                    map: map,
                    title: "place 1"
                });
                google.maps.event.addListener(marker8, 'click', function () {
                    infowindow8.open(map, marker8);
                });
                // End for Marker 7
4

1 に答える 1

3

これは純粋な JavaScript の完全な例であり、Google コード以外に外部リソースはありません。

ランダムな場所にマップを作成します。次に、これもランダムな位置とカテゴリ 1 ～ 4 で 8 つのマーカーを作成します。

次に、カテゴリを表示する選択ボックスがあります。カテゴリを選択すると、そのカテゴリに関連付けられたマーカーが表示され、残りは非表示になります。

したがって、マップの正しい中心を設定し、マーカー、カテゴリなどに正しい latLng を設定するのはあなた次第です。原則をご覧いただければ幸いです。

脚本 ：

var marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8;
var map;
var markersArray = [];

function getRandomLatLng() {
    var lat = Math.random()*30;
    var lng = Math.random()*30;
    return new google.maps.LatLng(lat, lng);  
}

function createMap() {
    var mapCenter = getRandomLatLng();
    console.log(mapCenter);
    map = new google.maps.Map(document.getElementById("map"), {
        center: mapCenter,
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoomControl: true,
        streetViewControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        }
    });
}

function createMarker(latLng, category) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category : category
    });
    markersArray.push(marker);
    return marker;
}

function createMarkers() {
    marker1=createMarker(getRandomLatLng(), 1);
    marker2=createMarker(getRandomLatLng(), 1);
    marker3=createMarker(getRandomLatLng(), 2);
    marker4=createMarker(getRandomLatLng(), 2);
    marker5=createMarker(getRandomLatLng(), 3);
    marker6=createMarker(getRandomLatLng(), 3);
    marker7=createMarker(getRandomLatLng(), 4);
    marker8=createMarker(getRandomLatLng(), 4);
}

function showMarkersByCategory(category) {
    for (var i=0;i<markersArray.length;i++) {
        if (markersArray[i].category==category) {
            markersArray[i].setVisible(true);
        } else {
            markersArray[i].setVisible(false);
        }
    }
}

function initialize() {
    createMap();
    createMarkers();
    var select=document.getElementById('select');
    select.onclick = function() {
        var category = this.value;
        showMarkersByCategory(category);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

マークアップ

<div id="map" style="width:400px;height:400px;"></div>
<select id="select">
<option value="1">category 1</option>
<option value="2">category 2</option>
<option value="3">category 3</option>
<option value="4">category 4</option>
</select>

ここに画像の説明を入力

于 2013-09-17T18:16:39.213 に答える