[英]Event Handling in JavaScript with Google Maps API
我使用Google Maps API創建了地圖,並在上面添加了兩個按鈕。 我正在嘗試添加
var trafficLayer =新的google.maps.TrafficLayer();
trafficLayer.setMap(map); 點擊事件。 但這沒有用。 有人可以幫我嗎?
這是代碼;
<!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-keyword在內部初始化中創建Layer時,將無法從此函數外部訪問Layer(通過onclick屬性應用click函數時會發生這種情況)。
創建圖層后,在“初始化”中添加單擊偵聽器。
樣本代碼(您可以刪除#panel
,控件將即時創建,此外,僅存在1個按鈕,該按鈕的值根據Layer的狀態而變化,因為當圖層已經關閉...反之亦然):
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
的末尾。
注意:伊斯坦布爾似乎沒有可用的路況數據,因此您需要縮小以查看其他地區的路況數據
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.