Google Maps API push Marker Lat/Lng on click to array for line path

梦想与她 提交于 2020-01-06 19:01:15

问题


What I am trying to accomplish is when a user clicks a marker, the latlng of that marker is seen as the first latlng of a line, which could have multiple destinations. This is my marker syntax to push the marker that is clicked to the array:

var originPoint = []
for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
        position: latlng,
        icon: points[i][3],
        zIndex: p[5],
        title: p[0]
    });

    overviewMarkers.push(marker)

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {

            infowindow.setContent(points[i][6] + '<div id="infopanel">' +
                '<input onclick="addLine();" type=button value="Show Routes">' +
                '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
            infowindow.open(map, marker)
            originPoint.push(marker, i);
        }
    })(marker, i));
}

Then my syntax for drawing the line. I am not sure if I am calling the marker latlng correctly from the originPoint array:

var arrayLine = []
var destPoint = [new google.maps.LatLng(51.9279723, 4.4904063),
    new google.maps.LatLng(40.136482, -73.831299),
    new google.maps.LatLng(34.0204989, -118.4117325)
];

var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};

for (var d in destPoint) {
    var dt = destPoint[d];
    var ot = new google.maps.LatLng(originPoint[1], originPoint[2])

    var linePath = new google.maps.Polyline({
        path: [ot, [dt][0]],
        strokeColor: '#4A484D',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true,
        icons: [{
            icon: lineSymbol,
            offset: '100%',
            repeat: '60px'
        }]

    });
    arrayLine.push(linePath)

    function setLines(map) {
        for (var i = 0; i < arrayLine.length; i++) {
            arrayLine[i].setMap(map);
        }
    }
}

Here is my current fiddle: http://jsfiddle.net/8dcgLja9/.

来源:https://stackoverflow.com/questions/25751118/google-maps-api-push-marker-lat-lng-on-click-to-array-for-line-path

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!