谷歌地图第3处理点击内部信息窗口

在地图上的单一信息窗口，因为许多指标
信息窗口的内容附加到标记
信息窗口打开的上的标记的点击=>从附着属性内容
信息窗口包含2个按钮=>组开始，设置目标
如果开始和目标设定，计算路径

我想了很多，这是相当困难的一个处理程序附加到按钮的信息窗口内。我找到了最好的提示是这样的一个：Adding event to element inside 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){

错误我怎么能一个事件绑定到信息窗口内的按钮，还自称recalcRoute？我也尝试在按钮上设置onclick，但对recalcRoute的引用未知。

为什么$('#infoWindow button').on('click',function(){ console.log('test'); });无法正常工作？

来源

2013-03-24 bitscorpion

你说的是“地图上的单个InfoWindow”，但代码另有说明。每次单击“标记”时都会创建一个新的infoWinow。 – 2013-03-24 23:17:28

要从HTML中访问变量单击侦听器，它们需要位于全局上下文中。
路线服务的出发地和目的地必须是google.maps.LatLng对象或可作为地址进行地理编码的字符串，而不是google.maps.Marker对象。标记的google.maps.LatLng可以用以下方式检索：

marker.getPosition（）。

working example

来源

2013-03-24 23:01:37 geocodezip

您应该能够建立contentWindow的HTML，然后单击只需一次操作，然后一遍一遍地使用它们。

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-25 01:31:58

谷歌地图第3处理点击内部信息窗口

回答

相关问题