创建具有多个点的折线，然后将添加的标记加入线段谷歌地图 v3

Question

我有一张谷歌地图，我正在上面绘制路线并将我的点与折线连接起来。我在地图上右键单击在线上创建一个新点。我还可以沿着我的路径创建一个兴趣点，我为这些点使用不同的标记图标，并显示一个带有 POI 文本的信息窗口。

google.maps.event.addListener(Map, "rightclick", function (event) {

            var markerIndex = polyLine.getPath().length;
            polyLine.setMap(Map);
            var isFirstMarker = markerIndex === 0;
            var marker;
            var poiText = "";
            if(!isAddingPOI) {
                marker = new google.maps.Marker({
                    map: Map,
                    position: event.latLng,
                    draggable: true,
                    icon: '/images/waypoint.png'
                });
            } else {
                poiText = prompt("Enter a short description for this point of interest", "");
                if (poiText != null) {
                    marker = new google.maps.Marker({
                        map: Map,
                        position: event.latLng,
                        draggable: true,
                        icon: '/images/point_of_interest.png',
                        info: new google.maps.InfoWindow({
                            content:poiText
                        })
                    });

                }
            }

            if (isAddingPOI) {
                predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng(), poiText));
                google.maps.event.addListener(marker, 'click', function () {
                    marker.info.open(Map, marker);
                });
                isAddingPOI = false;
            } else {
                predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng()));
            }

            polyLine.getPath().push(event.latLng);

            outlineMarkers.push(marker);

            google.maps.event.addListener(marker, 'drag', function (dragEvent) {
                polyLine.getPath().setAt(markerIndex, dragEvent.latLng);
                predefinedPositions[markerIndex].Latitude = dragEvent.latLng.lat();
                predefinedPositions[markerIndex].Longitude = dragEvent.latLng.lng();
                updateDistance(outlineMarkers);
            });                

            updateDistance(outlineMarkers);
        });

我现在需要的是用户能够为新标记指定 LatLng，该标记将被放置在地图上作为可拖动的，然后能够将该标记合并（通过拖动）到我创建的路径。理想情况下，我希望在标记位于其上方时拖动标记以更改颜色的折线段。然后我需要将该标记添加到最终输出的路径数组中。

我发现这是我能找到的最接近我想要的东西，但它不是我要找的东西：Google Maps API v3 - Draggable Marker Along a Polyline

我还尝试将“鼠标悬停”事件添加到我的折线以更新在我拖动标记时不会触发的颜色。当我将鼠标悬停在它上面时，它还会更新整个折线的颜色（不仅仅是线段）。我确信我可以自己解决段颜色变化，但我坚持将标记拖到线上并让它改变颜色并最终将其合并到我的路径中。

任何建议将不胜感激。

TIA

Answer 1

我使用类似于以下内容的方法对其进行了整理：Confine dragging of Google Maps V3 Marker to Polyline

我没有让多段线段改变颜色，但这种“对齐”功能真的很接近我想要的。

Answer 2

试试这个方法

//data sample
var cities = [
    {
            city : 'Mayestik Tailor',
            desc : 'Jln Aspal Rata',
            lat : -6.2426373,
            lng : 106.7907953
        },
        {
            city : 'Bubur Ayam Barito',
            desc : 'Jl. Gandaria Tengah 3, Kramat Pela, Kebayoran Baru',
            lat : -6.2457674,
            lng : 106.790865
        },
        {
            city : 'Apartment Permata Gandaria',
            desc : 'Jl. Kyai Moh. Syafii Hadzami/Jl. Taman Gandaria',
            lat : -6.2450461,
            lng : 106.7882604

        }
];

创建函数到布局的中心点

var mapOptions = {
        zoom: 15,
        center:new google.maps.LatLng(-6.2451528,106.7901808),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var createMarker = function (info){
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(info.lat, info.lng),
            title: info.city
        });
    }

    var arr = [];
    for (i = 0; i < cities.length; i++){
        arr.push(new google.maps.LatLng(cities[i].lat, cities[i].lng));
    }

    // create polyline
        var flightPath = new google.maps.Polyline({
            path: arr,
            geodesic: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        flightPath.setMap(map);

 // loop for marker
    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

css类

#map {
    height:420px;
    width:600px;
}
.infoWindowContent {
    font-size:  14px !important;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
h2 {
    margin-bottom:0;
    margin-top: 0;
}

关于 HTML 代码

<div id="map"></div>