总而言之一句话,我尽量做到:
我想了很多,这是相当困难的一个处理程序附加到按钮的信息窗口内。我找到了最好的提示是这样的一个: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'); });
不工作?
您应该能够建立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
阵列,这是通过循环来创建许多标记物是必要的。