0

我有一个带有多个标记的地图，我不能做一个数组，因为这个页面需要是独立的（没有外部来源）。我需要为每个标记分配一个索引，这样我就可以创建一个复选框、下拉或滑块控件来关闭/打开所需的标记类别。所以假设我有 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
4

1 回答 1

3

这是一个纯 javascript 的完整示例，除了 google-code 之外，没有外部资源。

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

然后是一个显示类别的选择框。当您选择一个类别时，与该类别相关的标记会显示，其余的则隐藏。

因此，现在由您来为地图设置正确的中心，为标记、类别等设置正确的纬度。希望你能看到原理。

脚本 ：

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 回答