谷歌距离地图自定义目的地标记时起点默认标记显示异常问题

核心逻辑是关闭路线服务默认的所有标记渲染，手动分别控制起点、终点的标记样式：

• 初始化DirectionsRenderer时开启suppressMarkers: true，关闭谷歌默认生成的起点、终点标记，避免和自定义标记冲突
• 保留你原有代码中手动创建当前位置标记的逻辑，即可实现保留当前位置标记的需求
• 在路线请求成功回调中手动添加自定义的目的地标记，可自由配置样式、交互

核心代码修改 #

1. 修改DirectionsRenderer初始化配置

// 原有代码
directionsDisplay = new google.maps.DirectionsRenderer(); 
// 修改为
directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

2. 路线请求成功回调中添加自定义目的地标记

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setPanel(document.getElementById("directions"));
        directionsDisplay.setDirections(response); 
        $("#outputs").show();

        // 新增：自定义目的地标记
        var destMarker = new google.maps.Marker({
            position: targetDestination,
            map: map,
            title: "目的地",
            // 按需添加icon属性配置自定义图标，不填则使用谷歌默认标记
        });
        // 可按需添加目的地信息窗口交互
        var destInfowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(destMarker, 'click', function() {
            destInfowindow.setContent("目的地：纬度" + targetLat + " 经度" + targetLon);
            destInfowindow.open(map, destMarker);
        });
    }
    else {
        $("#outputs").hide();
    }
});

如果需要当前位置标记和谷歌默认的当前位置样式一致，可给你原有代码中的currentPositionMarker添加icon属性配置对应图标资源即可。

内容的提问来源于stack exchange，提问作者Sapna Singh