javascript - 第二次点击清除谷歌地图

Question

我正在为我的项目使用谷歌地图。当用户单击地图时，我会显示一个标记。如何通过第二次点击清除地图并显示另一个标记？

                function myMap() {
                    var mapCanvas = document.getElementById("map");
                    var myCenter = new google.maps.LatLng(32.1788385, 54.5177581);
                    var mapOptions = {center: myCenter, zoom: 5};
                    var map = new google.maps.Map(mapCanvas, mapOptions);
                    google.maps.event.addListener(map, 'click', function (event) {
                        placeMarker(map, event.latLng);
                    });
                }

                function placeMarker(map, location) {
                    var marker = new google.maps.Marker({
                        position: location,
                        map: map
                    });
                }

标签： javascriptgoogle-maps

Answer 1

您需要将标记的引用保存在全局变量中。您还需要检查类型marker或将其包装在try-catch语句中。

const mapCanvas = document.getElementById("map");
var marker;

function initMap(){

    var myCenter = new google.maps.LatLng(32.1788385, 54.5177581);
    var mapOptions = {center: myCenter, zoom: 5};

    var map = new google.maps.Map(mapCanvas, mapOptions);

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(map, event.latLng);
    });
}

function placeMarker(map, location) {

    // Remove the previous marker
    try {
        marker.setMap(null)
    } catch (e) {}

    // Update the marker
    marker = new google.maps.Marker({
        position: location,
        map: map
    });

}

小提琴