事件处理在JavaScript与谷歌地图API
Event Handling in JavaScript with Google Maps API
我使用Google Maps API创建了一个地图，并在上面添加了两个按钮。我想加上，
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(地图);事件时单击。但这并没有奏效。有人能帮我吗?
下面是代码;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Harita</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
// Home SetHome olayı başlangıcı
//var map;
var deniz = new google.maps.LatLng(41.04052016955172,29.02639389038086);
HomeControl.prototype.home_ = null;
HomeControl.prototype.getHome = function() {
return this.home_;
}
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
}
function HomeControl(controlDiv, map, home) {
var control = this;
control.home_ = home;
controlDiv.style.padding = '5px';
var goHomeUI = document.createElement('div');
goHomeUI.style.backgroundColor = 'white';
goHomeUI.style.borderStyle = 'solid';
goHomeUI.style.borderWidth = '2px';
goHomeUI.style.cursor = 'pointer';
goHomeUI.style.textAlign = 'center';
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
var goHomeText = document.createElement('div');
goHomeText.style.fontFamily = 'Arial,sans-serif';
goHomeText.style.fontSize = '12px';
goHomeText.style.paddingLeft = '4px';
goHomeText.style.paddingRight = '4px';
goHomeText.innerHTML = '<b>Home</b>';
goHomeUI.appendChild(goHomeText);
var setHomeUI = document.createElement('div');
setHomeUI.style.backgroundColor = 'white';
setHomeUI.style.borderStyle = 'solid';
setHomeUI.style.borderWidth = '2px';
setHomeUI.style.cursor = 'pointer';
setHomeUI.style.textAlign = 'center';
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
var setHomeText = document.createElement('div');
setHomeText.style.fontFamily = 'Arial,sans-serif';
setHomeText.style.fontSize = '12px';
setHomeText.style.paddingLeft = '4px';
setHomeText.style.paddingRight = '4px';
setHomeText.innerHTML = '<b>Set Home</b>';
setHomeUI.appendChild(setHomeText);
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 9,
center: deniz
}
map = new google.maps.Map(mapDiv, mapOptions);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map, deniz);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
// Home SetHome olayı bitişi
//1. Marker (ışık üni )
var myLatlng1 = new google.maps.LatLng(41.16973837959339,29.561526775360107);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Click to zoom'
});
// 2. Marker ( itü fef)
var myLatlng2 = new google.maps.LatLng(41.106438353246574,29.023251682519913);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Click to zoom'
});
// 3. Marker ( ist üni )
var myLatlng3 = new google.maps.LatLng(41.01275461356736,28.9611903950572);
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map,
title: 'Click to zoom'
});
//4. Marker ( marmara üni )
var myLatlng4 = new google.maps.LatLng(40.98696866267149,29.052727818489075);
var marker4= new google.maps.Marker({
position: myLatlng4,
map: map,
title: 'Click to zoom'
});
// 1. markerin click -zoom olayı
google.maps.event.addListener(marker1, 'click', function() {
map.setZoom(11);
map.setCenter(marker1.getPosition());
});
//2. markerin click- zoom olayı
google.maps.event.addListener(marker2, 'click', function() {
map.setZoom(11);
map.setCenter(marker2.getPosition());
});
//3. markerin click- zoom olayı
google.maps.event.addListener(marker3, 'click', function() {
map.setZoom(11);
map.setCenter(marker3.getPosition());
});
//4. markerin click- zoom olayı
google.maps.event.addListener(marker4, 'click', function() {
map.setZoom(11);
map.setCenter(marker4.getPosition());
});
//1 . Marker için Bilgi Penceresi
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>Işık Üniversitesi Şile Kampüsü</b> <br>'+
'Meşrutiyet Köyü <br>'+
'Üniversite Sokak, Dış Kapı No:2<br> '+
'34980 Şile/İstanbul<br>'+
'Santral: (0-216) 712 14 60 <br> '+
'Faks: (0-216) 712 14 68 <br>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
//2 . Marker için Bilgi Penceresi
var contentString2 = '<div id="content">'+
'<div id="siteNotice">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>İTÜ Ayazağa Kampüsü</b> <br>'+
'34469 Maslak - Sarıyer - İSTANBUL<br>'+
'Telefon: 0 (212) 285 66 77 <br> '+
' 0 (212) 285 66 79<br> '+
'Faks: 0 (212) 285 65 95 <br>'+
'</div>'+
'</div>';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
//3. Marker için Bilgi Penceresi
var contentString3 = '<div id="content">'+
'<div id="siteNotice">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>İstanbul Üniversitesi Beyazıt Yerleşkesi</b> <br>'+
'34452 Beyazıt, İstanbul – Türkiye<br>'+
'Telefon: 0 (212) 285 66 77 <br> '+
' Tel: 0 212 440 00 00<br> '+
'Faks: 0 212 440 00 10<br>'+
'</div>'+
'</div>';
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map,marker3);
});
//4. Marker için Bilgi Penceresi
var contentString4 = '<div id="content">'+
'<div id="siteNotice">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>Marmara Üniversitesi Göztepe Kampüsü</b> <br>'+
'Eğitim Mh. <br>'+
'Kadıköy - İstanbul, 34722 <br> '+
'Telefon:(0216) 414 0545<br> '+
'<br>'+
'</div>'+
'</div>';
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map,marker4);
});
// Polylines başlangıç
var flightPlanCoordinates = [
new google.maps.LatLng(40.98696866267149,29.052727818489075),
new google.maps.LatLng(41.16973837959339,29.561526775360107),
new google.maps.LatLng(41.106438353246574,29.023251682519913),
new google.maps.LatLng(41.01275461356736,28.9611903950572),
new google.maps.LatLng(40.98696866267149,29.052727818489075)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity:1.5,
strokeWeight: 3
});
flightPath.setMap(map);
//Polylines bitiş
// Rectangle Başlangıç
var infoWindow2;
var rectangle;
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.00697765211052,28.991975784301758),
new google.maps.LatLng(41.00697765211052,28.991975784301758));
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
rectangle.setMap(map);
google.maps.event.addListener(rectangle, 'bounds_changed', showNewRect);
infoWindow2 = new google.maps.InfoWindow();
function showNewRect(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var contentString = '<b>Koordinat Bulucu .</b><br>' +
'Kuzey Dogu Kose Koordinatlari : ' + ne.lat() + ', ' + ne.lng() + '<br>' +
'Yeni Guney Bati Kosesi : ' + sw.lat() + ', ' + sw.lng();
infoWindow2.setContent(contentString);
infoWindow2.setPosition(ne);
infoWindow2.open(map);
}
// Rectangle Bitiş.
// Pembe Üçgen
var blueCoords = [
new google.maps.LatLng(40.96045610668445,29.050426483154297),
new google.maps.LatLng(41.01275461356736,28.9611903950572),
new google.maps.LatLng(40.95008471741818,28.910694122314453)
];
new google.maps.Polygon({
map: map,
paths: blueCoords,
strokeColor: '#FF33FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF33FF',
fillOpacity: 0.35,
draggable: true,
geodesic: false
});
// Boğaziçi Köprüsü Simgesi Animasyon
var lineCoordinates = [
new google.maps.LatLng(41.09073722135943,29.053752422332764),
new google.maps.LatLng(41.091416441697305, 29.068644046783447)
];
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
strokeColor: '#9900CC'
};
line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
animateCircle();
}
function animateCircle() {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 5);
// animasyon bitimi
// Transit Layer
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id ="panel">
<input type="button" value="Traffic Layer ON " onclick=";"></input>
<input type="button" value="Traffic Layer OF " onclick=";"></input>
</div>
<div id="map-canvas"></div>
</body>
</html>
当你使用var关键字在内部初始化创建图层时，该图层将无法从该函数外部访问(当你通过onclick-property应用click-function时是什么情况)
在初始化中添加点击监听器，在创建图层后。
示例代码(您可以删除#panel，控件将被创建在飞行中，此外，将只有一个按钮的变化值取决于层的状态，因为没有必要的关闭按钮时，层已经关闭…反之亦然):
var trafficLayer = new google.maps.TrafficLayer(),
trafficCtrl = document.createElement('div'),
trafficBtn = trafficCtrl.appendChild(document.createElement('input'));
trafficBtn.type = 'button';
trafficCtrl.style.cssText = 'background:#fff;padding:5px';
//click-listener for the button
google.maps.event.addDomListener(trafficBtn,'click',function(){
trafficLayer.setMap((trafficLayer.getMap())?null:map);
});
//observe the map-property of the TrafficLayer to get always the
//correct state for the button
google.maps.event.addListener(trafficLayer,'map_changed',function(){
trafficBtn.value='Traffic Layer '+((!!this.getMap())?'OFF':'ON');
});
//trigger the map_changed-event to initialize the state of the button
google.maps.event.trigger(trafficLayer,'map_changed',{});
//add the control
map.controls[google.maps.ControlPosition.TOP_CENTER].push(trafficCtrl);
将此代码添加到initialize的末尾。
注:由于伊斯坦布尔似乎没有可用的交通数据，您需要缩小以查看其他地区的交通数据
相关文章：
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 标记的实时更新，无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记，谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭(）不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine，but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市）
- 谷歌地图API标记没有标记我的位置
- 使用谷歌地图api 3为MapTypeId.TERRAIN分离按钮
- 在JQuery中使用谷歌地图Api事件/侦听器
- 在Ionic应用程序上使用$.getScript加载谷歌地图Api
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API）
- 谷歌地图API-显示具有不同图标的标记
- 如何停止地图移动时，鼠标悬停在标记在谷歌地图API 3
