2

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

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

red.png - http://maps.google.com/mapfiles/ms/micons/red.png

http://jsfiddle.net

我的代码如下

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();
4

2 回答 2

0

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

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 链接上对此进行了测试，并且效果很好。

于 2013-09-18T09:50:22.650 回答
0

这就是我要做的。为 .添加一个数组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
    });
}

小提琴

于 2013-09-18T09:55:15.193 回答