谷歌地圖信息窗口中按鈕的點擊事件
[英]click event for buttons in the google map info window
問題描述
我想為谷歌標記信息窗口內的按鈕設置點擊事件，以便當用戶點擊“獲取方向”按鈕時，谷歌路線將顯示在地圖旁邊的面板上（從信息窗口的地址開始到用戶的當前地址）。
下面是我的代碼。 如果您單擊商店 A 的“獲取方向”，您將在地圖右側的面板上看到一條路線...
如果我單擊其他按鈕，它會顯示“未捕獲的類型錯誤：無法讀取 _.gg 處的 null 屬性‘addEventListener’。”
我目前停留在這些按鈕的循環中......有人可以給我一些想法嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Store Locations</title>
<style>
#map {
width: 60%;
height: 650px;
margin-left: 4%;
margin-top: 2%
}
#right-panel {
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
height: 650px;
float: right;
width: 30%;
overflow: auto;
margin-top: 2%;
height: 650px;
margin-right: 4%;
}
@media print {
#map {
height: 650px;
margin-left: 4%;
width: 60%;
}
#right-panel {
float: right;
height: 650px;
}
}
</style>
</head>
<p id='dTitle'>
<h3>Store Locations</h3>
</p>
<div id="right-panel"></div>
<div id="map"></div>
<div id="directionsPanel"></div>
<script>
// 初始化map
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(49.0020285, -97.2347275), zoom: 4
});
var storeLocations = [
{ markerId: 1, title: 'Click for location details', LatLng: new google.maps.LatLng(53.483710, -113.483230), contentString: '<div><strong>Store A</strong></div>' + '<p>div>Edmonton AB, T6E 5C5, Canada</div></p>' + '<div><button class="gDirection1">Get Directions</button></div>' },
{ markerId: 2, title: 'Click for location details', LatLng: new google.maps.LatLng(50.036490, -110.667030), contentString: '<div><strong>Store B</strong></div>' + '<p><div>Medicine Hat AB, T1A 2Z8, Canada</div></p>' + '<div><button class="gDirection1">Get Directions</button></div>' },
{ markerId: 3, title: 'Click for location details', LatLng: new google.maps.LatLng(49.262760, -123.004020), contentString: '<div><strong>Store C</strong></div>' + '<p><div>Burnaby BC, V5C 5T3, Canada</div></p>' + '<div><button id="gDirection2">Get Directions</button></div>' }]
var markers = []
for (var i = 0; i < storeLocations.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
position: storeLocations[i].LatLng,
content: storeLocations[i].contentString,
title: storeLocations[i].title
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markers[i], 'click', function () {
infowindow.setContent(this.content);
infowindow.open(this.getMap(), this);
infowindow.set(this.title);
});
}
function getCustomercurrentlocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (positionGet) {
map.setCenter(new google.maps.LatLng(positionGet.coords.latitude, positionGet.coords.longitude)),
map.setZoom(10)
var contentcurrentLocation = '<h3><center>Your current location</h3></center>';
var icon = {
url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
scaledSize: new google.maps.Size(55, 55), // scaled size
};
var newMarker = new google.maps.Marker({
map: map,
icon: icon,
position: new google.maps.LatLng(positionGet.coords.latitude, positionGet.coords.longitude)
});
infowindow.setContent(contentcurrentLocation);
infowindow.open(map, newMarker);
},
function (positionNotget) {
map.setCenter(new google.maps.LatLng(49.148160, -112.087260)),
map.setZoom(4)
});
}
else // browser doesn't suppost Geolocation
alert('Geolocation is not supported by your browser.');
}
//google.maps.event.addListener( "domready",getCustomercurrentlocation());
var btns = document.getElementById("gDirection");
google.maps.event.addListener(infowindow, 'domready', function () {
btns.addListener('click', function calcRoute() {
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById('right-panel'));
var start = new google.maps.LatLng(49.148160, -112.087260);
var end = new google.maps.LatLng(44.71682, -63.58431)
var request = {
origin: start,
destination: end,
travelMode: 'DRIVING'
};
directionsService.route(request, function (result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
}
});
})
}
)
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key="></script>
</body>
1 個解決方案
解決方案1
0 已采納 2019-12-12 00:10:25
您在行中收到錯誤Uncaught TypeError: Cannot read property 'addEventListener' of null ：
document.getElementById("gDirection").addEventListener('click', function calcRoute(){
因為 DOM 中沒有id="gDirection"元素。
按鈕定義如下：
<button class="gDirection">Get Directions</button>
要訪問它，您需要使用getElementsByClassName("gDirection")[0]
更新代碼：
google.maps.event.addListener(infowindow, 'domready', function() {
document.getElementsByClassName("gDirection")[0].addEventListener('click', function calcRoute() {
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById('right-panel'));
var start = new google.maps.LatLng(49.148160, -112.087260);
var end = new google.maps.LatLng(44.71682, -63.58431)
var request = {
origin: start,
destination: end,
travelMode: 'DRIVING'
};
console.log("origin="+request.origin.toUrlValue(6)+" dest="+request.destination.toUrlValue(6));
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
}
});
})
})
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; } #map { width: 60%; height: 80%; margin-left: 4%; margin-top: 2% } #right-panel { font-family: 'Roboto', 'sans-serif'; line-height: 30px; height: 80%; float: right; width: 30%; overflow: auto; margin-top: 2%; height: 650px; margin-right: 4%; } @media print { #map { height: 650px; margin-left: 4%; width: 60%; } #right-panel { float: right; height: 650px; } }
<p id='dTitle'> <h3>Store Locations</h3> </p> <div id="right-panel"></div> <div id="map"></div> <div id="directionsPanel"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(49.0020285, -97.2347275), zoom: 4 }); var storeLocations = [{ markerId: 1, title: 'Click for location details', LatLng: new google.maps.LatLng(53.553429, -113.639793), contentString: '<div><strong>Store A</strong></div>' + '<p><<div>Edmonton AB, T5S 2T2, Canada</div></p>' + '<div><button class="gDirection">Get Directions</div>' }, { markerId: 2, title: 'Click for location details', LatLng: new google.maps.LatLng(53.483710, -113.483230), contentString: '<div><strong>Store B</strong></div>' + '<p>div>Edmonton AB, T6E 5C5, Canada</div></p>' + '<div><button class="gDirection">Get Directions</button></div>' }, { markerId: 3, title: 'Click for location details', LatLng: new google.maps.LatLng(50.036490, -110.667030), contentString: '<div><strong>Store C</strong></div>' + '<p><div>Medicine Hat AB, T1A 2Z8, Canada</div></p>' + '<div><button class="gDirection">Get Directions</button></div>' }, { markerId: 4, title: 'Click for location details', LatLng: new google.maps.LatLng(49.262760, -123.004020), contentString: '<div><strong>Store D</strong></div>' + '<p><div>Burnaby BC, V5C 5T3, Canada</div></p>' + '<div><button class="gDirection">Get Directions</button></div>' } ] var markers = [] for (var i = 0; i < storeLocations.length; i++) { markers[i] = new google.maps.Marker({ map: map, position: storeLocations[i].LatLng, content: storeLocations[i].contentString, title: storeLocations[i].title }); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(markers[i], 'click', function() { infowindow.setContent(this.content); infowindow.open(this.getMap(), this); infowindow.set(this.title); }); } function getCustomercurrentlocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(positionGet) { map.setCenter(new google.maps.LatLng(positionGet.coords.latitude, positionGet.coords.longitude)), map.setZoom(10) var contentcurrentLocation = '<h3><center>Your current location</h3></center>'; var icon = { url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', scaledSize: new google.maps.Size(55, 55), // scaled size }; var newMarker = new google.maps.Marker({ map: map, icon: icon, position: new google.maps.LatLng(positionGet.coords.latitude, positionGet.coords.longitude) }); infowindow.setContent(contentcurrentLocation); infowindow.open(map, newMarker); }, function(positionNotget) { map.setCenter(new google.maps.LatLng(49.148160, -112.087260)), map.setZoom(4) }); } else // browser doesn't suppost Geolocation alert('Geolocation is not supported by your browser.'); } //google.maps.event.addListener( "domready",getCustomercurrentlocation()); google.maps.event.addListener(infowindow, 'domready', function() { document.getElementsByClassName("gDirection")[0].addEventListener('click', function calcRoute() { var directionsService = new google.maps.DirectionsService(); var directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); directionsRenderer.setPanel(document.getElementById('right-panel')); var start = new google.maps.LatLng(49.148160, -112.087260); var end = new google.maps.LatLng(44.71682, -63.58431) var request = { origin: start, destination: end, travelMode: 'DRIVING' }; console.log("origin=" + request.origin.toUrlValue(6) + " dest=" + request.destination.toUrlValue(6)); directionsService.route(request, function(result, status) { if (status == 'OK') { directionsRenderer.setDirections(result); } }); }) }) } </script> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
Android中ng-click angularjs google map上未顯示信息窗口
[英]Info window not displaying on ng-click angularjs google map in android
點擊側邊欄元素上的Google Cluster地圖打開特定信息窗口
[英]Google Cluster map on click sidebar elements open particular info window
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.