Javascript 在谷歌地图中将标记放在行的末尾

我在谷歌地图上用纬度和经度画了一条线。我还在行的开头放了一个标记blue.png

有人能告诉我如何在谷歌地图的最后一行加上一个标记red.png吗

red.png-

我的代码如下所示

function initialize() {
    var center = new google.maps.LatLng(10.012552, 76.327043);
    var myOptions = {
        zoom: 16,
        center: center,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var polylineCoordinates = [
    new google.maps.LatLng(10.013566, 76.331549),
    new google.maps.LatLng(10.013566, 76.331463),
    new google.maps.LatLng(10.013503, 76.331313),
    new google.maps.LatLng(10.013482, 76.331205),
    new google.maps.LatLng(10.013419, 76.330926),
    new google.maps.LatLng(10.013334, 76.330712),
    new google.maps.LatLng(10.013313, 76.330411),
    new google.maps.LatLng(10.013292, 76.330175),
    new google.maps.LatLng(10.013228, 76.329854),
    new google.maps.LatLng(10.013144, 76.329553),
    new google.maps.LatLng(10.013059, 76.329296),
    new google.maps.LatLng(10.012996, 76.329017),
    new google.maps.LatLng(10.012869, 76.328802),
    new google.maps.LatLng(10.012785, 76.328545),
    new google.maps.LatLng(10.012700, 76.328223),
    new google.maps.LatLng(10.012679, 76.328030),
    new google.maps.LatLng(10.012658, 76.327837),
    new google.maps.LatLng(10.012637, 76.327600),
    new google.maps.LatLng(10.012573, 76.327322),
    new google.maps.LatLng(10.012552, 76.327043)

    ];
    var polyline = new google.maps.Polyline({
        path: polylineCoordinates,
        strokeColor: '#FF3300',
        strokeOpacity: 2.0,
        strokeWeight: 5,
        editable: false
    });

    polyline.setMap(map);
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png");
    new google.maps.Marker({
        position: polylineCoordinates[polylineCoordinates.length - 1],
        icon: icon,
        map: map,
        clickable: false
    });

}



initialize();

---

考虑到您使用了下一行，您添加的蓝色标记位于该行的末尾

position: polylineCoordinates[polylineCoordinates.length - 1],

这将获取多段线阵列中的最后一个坐标

要将图标添加到多段线的起点，可以使用

position: polylineCoordinates[0],

在将红色标记添加到多段线起点的蓝色标记后添加了以下代码

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png");
new google.maps.Marker({
    position: polylineCoordinates[0],
    icon: icon,
    map: map,
    clickable: false
});

}

---

在您提供的JSFIDLE链接上对此进行了测试，效果非常好。

下面是我要做的。为

标记添加一个数组。这意味着您可以正确地管理它们。然后具有创建标记的功能：

var markers = [];
var len = polylineCoordinates.length;

markers.push(getMarker('blue', polylineCoordinates[len - 1]));
markers.push(getMarker('red', polylineCoordinates[0]));

function getMarker(type, coords) {
    switch (type) {
      case 'blue':
        var iconUrl = "http://maps.google.com/mapfiles/ms/micons/blue.png";
        break;
      case 'red':
        var iconUrl = "http://maps.google.com/mapfiles/ms/micons/red.png";
        break;
    }
    return new google.maps.Marker({
        position: coords,
        icon: new google.maps.MarkerImage(iconUrl),
        map: map,
        clickable: false
    });
}