2

要するに、私が達成しようとしていること：

  • 多くのマーカーがあるため、マップ上の単一の InfoWindow
  • マーカーに添付された InfoWindow コンテンツ
  • マーカーのクリックで InfoWindow が開きます => 添付された属性のコンテンツ
  • InfoWindow には 2 つのボタンが含まれています =>開始の設定、ターゲットの設定
  • 出発地と目的地が設定されている場合、ルートを計算します

いろいろ試しましたが、InfoWindow 内のボタンにハンドラーをアタッチするのは非常に困難です。私が見つけた最高のヒントはこれでした: Google Maps API InfoWindow 内の要素にイベントを追加する

私はこれまでにこれを試しました：

<script>
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(50.903033, 11.359863),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true,
        scaleControl: true,
        overviewMapControl: true
    };
    var map = new google.maps.Map(document.getElementById('limousine-map'),
        mapOptions);
    var directionsService = new google.maps.DirectionsService();
    var directionDisplay = new google.maps.DirectionsRenderer();
    directionDisplay.setMap(map);
    directionDisplay.setPanel(document.getElementById('route-details'));
    var infoWindow = new google.maps.InfoWindow();
    var endPoint = false;
    var startPoint = false;


var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(50.903033, 11.359863),
    title: 'Test1'
});
marker.infoWindowContent = [
    '<div id="infoWindow"><strong>Test</strong>',
    '<button class="button" id="selectStart">Start</button>'+
    '<button class="button" id="selectTarget" style="float: right;">Target</button></div>'
].join('<br>');

google.maps.event.addListener(marker,'click',function(){
    infoWindow.close();
    infoWindow = new google.maps.InfoWindow({
        content: this.infoWindowContent
    });
    infoWindow.open(map,this);
    clickedLocation = this;
    google.maps.event.addListener(infoWindow, 'domready', function() {
        $('#infoWindow button').on('click',function(){
            console.log(clickedLocation);
            if($(this).attr('id') == 'selectStart'){
                startPoint = clickedLocation;
            }
            if($(this).attr('id') == 'selectTarget'){
                endPoint = clickedLocation;
            }
            recalcRoute();
        });
    });
});

var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(52.903033, 12.359863),
    title: 'Test2'
});
marker2.infoWindowContent = [
    '<div id="infoWindow"><strong>Test2</strong>',
    '<button class="button" id="selectStart">Start</button>'+
            '<button class="button" id="selectTarget" style="float: right;">Target</button></div>'
].join('<br>');

google.maps.event.addListener(marker2,'click',function(){
    infoWindow.close();
    infoWindow = new google.maps.InfoWindow({
        content: this.infoWindowContent
    });
    infoWindow.open(map,this);
    clickedLocation = this;
});



//Route painting
function recalcRoute(){
    if(startPoint != false && endPoint != false){
        var request = {
            origin: startPoint,
            destination: endPoint,
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC
        };
        directionsService.route(request, function(response, status){
            if(status == google.maps.DirectionsStatus.OK){
                $('#route-details').parent().fadeIn();
                directionDisplay.setDirections(response);
            }
        });
    }else{
        directionDisplay.setDirections(null);
    }
}

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

ハンドラーは機能しましたが、ルート計算が機能しません。次のようなエラーが表示されます

Uncaught Error: Invalid value for property <origin>: [object Object] 
thrown at line: directionsService.route(request, function(response, status){

InfoWindow 内のボタンにイベントをバインドし、recalcRoute を呼び出すにはどうすればよいですか? ボタンにも設定しようとしonclickましたが、recalcRoute への参照が不明です。

なぜ機能しないの$('#infoWindow button').on('click',function(){ console.log('test'); });ですか？

4

2 に答える 2

0
  1. HTML クリック リスナーから変数にアクセスするには、それらがグローバル コンテキストにある必要があります。

  2. ルート サービスの出発地と目的地は、google.maps.Marker オブジェクトではなく、住所としてジオコーディングできる google.maps.LatLng オブジェクトまたは文字列である必要があります。マーカーの google.maps.LatLng は、次の方法で取得できます。

    マーカー.getPosition()。

実施例

于 2013-03-24T23:01:37.897 に答える
0

contentWindow の HTML とクリック アクションを 1 回だけ確立してから、それらを何度も使用できるようにする必要があります。

contentWindow で変更する必要があるのは、クリックされたマーカーのタイトルを反映するタイトルだけです。

このような何かがそれを行う必要があります:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(50.903033, 11.359863),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true,
        scaleControl: true,
        overviewMapControl: true
    };
    var map = new google.maps.Map(document.getElementById('limousine-map'), mapOptions);
    var directionsService = new google.maps.DirectionsService();
    var directionDisplay = new google.maps.DirectionsRenderer();
    directionDisplay.setMap(map);
    directionDisplay.setPanel(document.getElementById('route-details'));

    var Route = {
        var request = {
            origin: null,
            destination: null,
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC
        };
        this.setOrigin = function(m) { request.origin = m.getPosition(); };
        this.setDestination = function(m) { request.destination = m.getPosition(); };
        this.calc = function() {
            if(request.origin && request.destination) {
                directionsService.route(request, function(response, status) {
                    if(status == google.maps.DirectionsStatus.OK) {
                        $('#route-details').parent().fadeIn();
                        directionDisplay.setDirections(response);
                    }
                });
            } else {
                directionDisplay.setDirections(null);
            }
        }
    };

    var route = new Route();
    var clickedLocation;

    var $infoWindowContent = $([
        '<div class="infoWindowContent">',
        '<h3></h3>',
        '<button class="setOrigin">Start</button>',
        '<button class="setDestination" style="float: right;">Target</button>',
        '</div>'
    ].join(''));
    $infoWindowContent.find(".setOrigin").on('click', function() {
        route.setOrigin(clickedLocation);
        route.calc();
    });
    $infoWindowContent.find(".setDestination").on('click', function() {
        route.setDestination(clickedLocation);
        route.calc();
    });

    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent($infoWindowContent.get(0));

    //Assuming array markerData to contain the data necessary for bujilding markers ...
    $.each(markerData, function(i, m) {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(m.lat, m.lng),
            title: m.title
        });

        google.maps.event.addListener(marker, 'click', function() {
            clickedLocation = this;
            infoWindow.close();//necessary?
            $infoWindowContent.find("h3").text(this.getTitle());
            infoWindow.open(map, this);
        });
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

テストされていない

ノート：

  • Route()単一のインスタンスを使用して、ルートに関するすべてをコンストラクターにまとめましたroute。
  • 最初はすべてのマーカー データがmarkerData配列に含まれていると仮定しました。この配列は、必要な数のマーカーを作成するためにループされます。
于 2013-03-25T01:31:58.287 に答える