首页 文章

创建具有多个点的折线,然后将添加的标记连接到线段google maps v3

提问于
浏览
0

我有一个谷歌 Map ,我正在绘制一条路线并将我的点与折线连接起来 . 我在线上创建一个新点,右键单击 Map . 我也有能力在我的路径上创建一个兴趣点,我正在使用不同的标记图标,以及显示带有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的能力,该新标记将作为可拖动放置在 Map 上,然后能够将该标记合并(通过拖动)到我创建的路径 . 理想情况下,我想要拖动标记的折线段以在标记位于其上时更改颜色 . 然后,我需要将该标记添加到路径数组中以进行最终输出 .

我发现这个最接近我想要的东西,但我找到了's not quite what I'我正在寻找:Google Maps API v3 - Draggable Marker Along a Polyline

我还尝试在我的折线上添加一个'mouseover'事件,以更新在拖动标记时不会触发的颜色 . 当我将鼠标悬停在它上面时,它还会更新整个折线的颜色(不仅仅是细分) . 我敢肯定我可以自己解决分段颜色变化,但是我坚持将标记拖过线并让它改变颜色并最终将它合并到我的路径上 .

任何建议将不胜感激 .

TIA

2 回答

  • 0

    我用类似的东西整理出来了:Confine dragging of Google Maps V3 Marker to Polyline

    我没有让折线段改变颜色,但这种“捕捉”功能非常接近我想要的 .

  • 0

    试试这种方式

    //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>
    

相关问题