通过下拉选择删除谷歌地图标记

Removing google map markers by drop-down selection

本文关键字：谷歌 地图 图标 删除 选择      更新时间：2023-09-26

我在地图上有9个标记，在这些标记周围，我有一些其他标记(绿色，橙色和蓝色)，表示与每个标记的距离有多大。我创建了一个包含9个地方的下拉列表，我的目标是删除利兹的标记，例如当我在下拉列表中单击利兹时。我尝试了下面的代码，但它似乎不起作用。我在控制台中没有得到任何错误。

var markers = [];
var orange = [];
var green = [];
var lightblue = [];
var takeValue;
var selectedValue;
putMarkersOnMap();
function putMarkersOnMap(){
    $.getJSON( "convertcsv3.json", function( data ) {
        $.each( data, function( key, val ) {
            if(val.Distance > 30){
                var pinColor1 = "FF9900";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
                    new google.maps.Size(21,34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(12,34));
                var orangeMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(val.LatitudeEmployee, val.LongitudeEmployee),
                    icon: pinImage,
                    map:map,
                    animation: google.maps.Animation.DROP,
                    draggable: false,
                    title: val.EmployeePostcode
                });
            orange.push(orangeMarker);
            }
            if(val.Distance < 20){
                var pinColor2 = "336600";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
                    new google.maps.Size(21,34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(12,34));
                var greenMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(val.LatitudeEmployee, val.LongitudeEmployee),
                    icon: pinImage,
                    map:map,
                    animation: google.maps.Animation.DROP,
                    draggable: false,
                    title: val.EmployeePostcode
                });
            green.push(greenMarker);
            }
            if(val.Distance >= 20 && val.Distance <= 29.999){
                var pinColor4 = "33CCFF";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor4,
                    new google.maps.Size(21,34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(12,34));
                var lightblueMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(val.LatitudeEmployee, val.LongitudeEmployee),
                    icon: pinImage,
                    map:map,
                    animation: google.maps.Animation.DROP,
                    draggable: false,
                    title: val.EmployeePostcode
                });
            lightblue.push(lightblueMarker);
            }
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(val.LatitudePostcodeArea, val.LongitudePostcodeArea),
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: false,
                title: val.Postcode_Town
            });
            //console.log(val.LatitudePostcodeArea + " " + val.LongitudePostcodeArea);
            markers.push(marker); // saving markers for reference, so that we can remove them later;
            takeValue = document.getElementById("town");
            selectedValue = takeValue.options[takeValue.selectedIndex].value;
            if(selectedValue == "Leeds"){
                for(var i1 = 0; i1 < markers.length; i1++){
                    if(val.Postcode_Town == "Leeds"){
                        markers[i1].setMap(null);
                    }
                }
                for(var i2 = 0; i2 < green.length; i2++){
                    if(val.Postcode_Town == "Leeds"){
                        green[i2].setMap(null);
                    }
                }
                for(var i3 = 0; i3 < orange.length; i3++){
                    if(val.Postcode_Town == "Leeds"){
                        orange[i3].setMap(null);
                    }
                }   
                for(var i4 = 0; i4 < lightblue.length; i4++){
                    if(val.Postcode_Town == "Leeds"){
                        lightblue[i4].setMap(null);
                    }
                }
            }
        });
    });
}
HTML: 

 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
<div id = "dropdown">
    <select id = "town">
        <option value="Nottingham">Nottingham</option>
        <option value="Chester">Chester</option>
        <option value="Leeds">Leeds</option>
        <option value="Oxford">Oxford</option>
        <option value="Northampton">Northampton</option>
        <option value="Aberdeen">Aberdeen</option>
        <option value="Derby">Derby</option>
        <option value="Lincoln">Lincoln</option>
        <option value="Cardiff">Cardiff</option>
    </select>
</div>
 </body>

这不起作用，因为在更改选择时没有发生任何变化。您可以将城镇过滤的代码移动到单独的函数中，并在选择更改时调用它。比如:

<script type="text/javascript">
var takeValue;
var selectedValue;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);
    takeValue = document.getElementById("town");
    selectedValue = takeValue.options[takeValue.selectedIndex].value;
    console.log('selected value: ' + selectedValue);
    google.maps.event.addDomListener(takeValue, 'change', removeSelection);
}
function removeSelection() {
    //takeValue = document.getElementById("town");
    selectedValue = takeValue.options[takeValue.selectedIndex].value;
    console.log('selected value: ' + selectedValue);
    // if(selectedValue == "Leeds"){
    // and code after it
}
google.maps.event.addDomListener(window, 'load', initialize);
相关文章：