Question

我有一个带有几个标记的地图，我不能做一个数组，因为这个页面需要独立（没有外部源）。我需要为每个标记分配一个索引，这样我就可以创建一个复选框，下拉或滑块控件来关闭/打开所需的标记类别。因此，假设我有10个标记，每个类别中有2个（1-5）我需要能够说出类别1和3并关闭其他类别。我怎么能这么容易做到？有人可以推荐我可以插入到我的函数中的代码来缩放到那些指定的组吗？

// 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

Answer 1

以下是纯javascript中的完整示例，除了google-code之外没有外部资源。

它在随机位置创建地图。然后它创建8个标记，也具有随机位置和类别1-4。

然后有一个显示类别的选择框。当您选择一个类别时，会显示与该类别相关联的标记，其余部分将被隐藏。

所以现在由你来设置地图的正确中心，为标记设置正确的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>

enter image description here

为标记指定类别

1 个答案: