2

緯度と経度を使用してGoogleマップに線を引きました。また、行の先頭にマーカー blue.png を配置しました。

Googleマップの行末にマーカー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

これが私がすることです。の配列を追加し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 に答える
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 に答える