2

私は Google マップ API にまったく慣れていません。Web で見つかったいくつかの例をまとめた後、ルートにカスタム マーカーを追加するという最後のハードルに苦労しています。これが私のコードです：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng([[showMapLatitude]],[[showMapLongitude]]);
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

var stylez = [
{
  featureType: "all",
  elementType: "all",
  stylers: [
    { saturation: -100 }
  ]
}
];


var image = new google.maps.MarkerImage('/icon.png',
    new google.maps.Size(20, 33),
    new google.maps.Point(0,0),
    new google.maps.Point(10,33)
);

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
            map.mapTypes.set('tehgrayz', mapType);
            map.setMapTypeId('tehgrayz');    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"[[*pagetitle]]",
                    icon: image
    });

}



function calcRoute() {
            $(".storeDetails").hide();
            $(".storeAdress").hide();
            $(".backtocontact").show();
    var start = document.getElementById("routeStart").value;
    var end = "[[showMapLatitude]],[[showMapLongitude]]";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

ここにそれを行う方法の例があります: Google マップの方向 api V3 で個々のマーカーを変更する

しかし、初心者なので、ここの適切な場所にそれをドロップすることはできないようです。エラーが発生するか、何もしません。

4

2 に答える 2

1

変化する

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

に

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var leg = response.routes[ 0 ].legs[ 0 ];
        makeMarker( leg.start_location, icons.start, "title" );
        makeMarker( leg.end_location, icons.end, 'title' );
    }
});

そして、機能を追加することを忘れないでくださいmakeMarker()。また、開始アイコンと終了アイコンの両方が必要になります

于 2012-10-26T11:53:58.047 に答える
0

私の他の答えのコメントへの返信

元のカスタムマーカーを削除してデフォルトのマーカーを表示するには

消去

var image = new google.maps.MarkerImage('/icon.png',
new google.maps.Size(20, 33),
new google.maps.Point(0,0),
new google.maps.Point(10,33)
);

と

var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"[[*pagetitle]]",
                icon: image
});

また、変更します

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

に

directionsDisplay = new google.maps.DirectionsRenderer();
于 2012-11-08T15:43:29.573 に答える