javascript - 谷歌地图在 Google Map V3 的 mapclick 上显示双标记，但我想要在 mapclick 的特定点上有一个标记

Question

每当我添加一个标记并计算 map 上的路线时，单击第二个标记，它会在单个图标上显示两个标记，如图所示。我只想在一个位置使用一个标记(即 A) 代码片段

var map, lat, lng;
var count = 1;
var markers = [],
    content_marker;
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService;
var pos_source, pos_desti;

// First Function

function onDeviceReady() {
    var height = $(window).outerHeight(true);
    $("#googleMap").css("height", height);

    navigator.geolocation.getCurrentPosition(onSuccess, onError, {
        enableHighAccuracy: true
    });
}

// GPS Success

function onSuccess(position) {

    lat = position.coords.latitude;
    lng = position.coords.longitude;

    /*
     * for ( var j = 0; j <= 10; j++) { setInterval(function() { lat++; lng++; },
     * 5000);
     */

    var mapProp = {

        center: new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // }

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    directionsDisplay.setMap(map);

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

        placeMarker(event.latLng);

    });

    /*
     * Auto Complete Search Box Starts var input =
     * (document.getElementById('pac-input')); var input1 =
     * (document.getElementById('pac-input1'));
     * 
     * var searchBox = new google.maps.places.SearchBox((input)); var searchBox1 =
     * new google.maps.places.SearchBox((input1));
     */

    // Auto Complete Search Box Ends }

    // Placing Marker

    function placeMarker(location) {
        if (count == 1 || count == 2) {

            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
            google.maps.event.addListener(marker, "click", function() {
                marker.setMap(null);
                count--;
            });

            if (count == 1) {

                pos_source = location;
                content_marker = 'Source';
                // marker.setMap(null);

            }
            if (count == 2) {

                // setInterval(function() {
                pos_desti = location;
                content_marker = 'Destination';
                // marker.setMap(null);
                calcRoute();
                // }, 3000);

            }

            // google.maps.event.addListener(marker, 'click', function() {
            // var x;
            // if (confirm("Remove Markers!") == true) {
            // x = "You pressed OK!";
            // } else {
            // x = "You pressed Cancel!";
            // }
            //
            // });

            count++;

            var infowindow = new google.maps.InfoWindow({
                content: content_marker
            });
            infowindow.open(map, marker);

        }

    }

    // Calculating Distance
    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {

            total += myroute.legs[i].distance.value;
        }
        total = total / 1609.34;
        document.getElementById('total').innerHTML = total + ' miles';
    }

    function deleteMarkers() {
        marker.setMap(null);
    }

    // Calculating route
    function calcRoute() {

        directionsService = new google.maps.DirectionsService();
        alert("Creating Shortest Path !!!");

        var request = {
            origin: pos_source,
            destination: pos_desti,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {

                directionsDisplay.setDirections(response);
                computeTotalDistance(directionsDisplay.getDirections());


                deleteMarkers();
            }
        });

    }

    // On GPS Error
    function onError(error) {
        alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
    }

Answer 1

发生的事情是您正在获取方向，它会在起点和终点上呈现标记。您正在添加自己的标记。您可以简单地阻止方向渲染器显示标记。将 suppressMarkers: true 添加到其选项中:

var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});