从选择菜单中选择新位置时，如何从谷歌地图中删除图钉？答案

【问题标题】：How can I remove pins from google maps when selecting new location from select menu?从选择菜单中选择新位置时，如何从谷歌地图中删除图钉？
【发布时间】：2018-09-14 22:28:23
【问题描述】：

我创建了一个简单的地图，其中包含允许用户选择大学校园位置的下拉菜单。现在，我正在尝试在选择新位置时清除先前的选择。任何与此相关的建议都会很棒。

我知道必须有更好的方法来做到这一点，而不是创建多个变量和函数，但它只需要在这一点上起作用。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://maps.googleapis.com/maps/api/js?key=
    AIzaSyDCnqMp9UXHgRIu0A9vWtn2MFiO1Ze-sq8
    &callback=initMap"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <header>
          <div class="ui-body ui-body-a ui-corner-all">
            <h3>BCIT Campuses</h3>
                  <p>This app is designed to show you the various BCIT Campus locations</p>
        </div>
    </header>
    <form>
        <div class="ui-field-contain">
                <label for="select-native-1">Select a campus</label>
                <select id="location" name="location">
                <option disabled selected> -- select a location -- </option>
                        <option value="DTN" onClick="downtownPin()">Downtown Campus</option>
                        <option id="BBY" name="burnaby" value="BBY" onClick="burnabyPin()">Burnaby Campus</option>
                <option id="ANN" value="ANN" onClick="annacisPin()">Annacis Campus</option>  
            </select>
        </div>
    </form>
    <div data-role="page" id="map-page" data-url="map-page">
        <div data-role="header" data-theme="a">
            <h1>Maps</h1>
        </div>
        <div role="main" class="ui-content" id="map-canvas">
            <!-- map loads here... -->
        </div>
    </div>
    <footer>
         <div class="ui-body ui-body-a ui-corner-all">
            <h4>Wade Barrie</h4>
              
        </div>
    </footer>
</body>
<script>
    /*
     * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
     * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
     */
    var map;
    function myMap() {
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {
            center: new google.maps.LatLng(49.2595139, -123.1133546),
            zoom: 10
        };
        map = new google.maps.Map(mapCanvas, mapOptions);
    }
    var myLatlng = new google.maps.LatLng(49.283333, -123.115556);
    var downtownCampus = new google.maps.LatLng(49.283333, -123.115556);
    var annacisCampus = new google.maps.LatLng(49.1636275, -122.9702631);
    var burnabyCampus = new google.maps.LatLng(49.2505981, -123.0020511);
    var mapOptions = {
        zoom: 10,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var downtownCampus = new google.maps.Marker({
        position: downtownCampus,
        title: "Downtown Campus"
    });

    var annacisCampus = new google.maps.Marker({
        position: annacisCampus,
        title: "Annacis Island"
    });

    var burnabyCampus = new google.maps.Marker({
        position: burnabyCampus,
        title: "Burnaby Campus"
    });
    // functions that actually place the pin on the map when selected
    function annacisPin(reload) {
        annacisCampus.setMap(map);
    }
    function downtownPin() {
        downtownCampus.setMap(map);
    }
    function burnabyPin() {
        burnabyCampus.setMap(map);
    }
</script>
</html>

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

您可以使用yourmarker.setMap(null) 从地图中删除一个标记，然后再显示下一个标记。 setMap(map) 向地图添加一个标记。 setMap(null) 删除它。

【讨论】：

效果很好。谢谢！我只是把它放在我的设置引脚函数中。这可能不是最干净的方法，但它适用于我的目的。
要记住的一件事是 D.R.Y. （不要重复自己）原则。不要为每个标记编写函数，而是编写一个生成选定标记的函数。因此，在菜单项单击事件中，传入校园名称和坐标，清除现有标记的地图，并使用给定参数渲染新标记。现在您的代码行数减少了，并且有了一个可重用的函数。
啊，是的。只需了解这些概念，并将继续牢记这一点。再次感谢！