在谷歌地图的行尾放置标记答案

【问题标题】：putting marker at the ending of line in google-map在谷歌地图的行尾放置标记
【发布时间】：2013-09-18 09:38:42
【问题描述】：

我在谷歌地图中使用 latitude 和 longitude 画了一条线。我还在行首放了一个标记 blue.png。

谁能告诉我如何在 google-map 的行尾放置一个标记 red.png

red.png - http://maps.google.com/mapfiles/ms/micons/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();

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

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

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
});

}

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

【讨论】：

【解决方案2】：

这就是我要做的。为markers 添加一个数组。这意味着您可以正确管理它们。然后有一个函数来创建标记：

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
    });
}

Fiddle

【讨论】：