Javascript 单击google地图信息窗口中按钮的事件
我想为google marker infowindow中的按钮设置单击事件，这样当用户单击“获取方向”按钮时，google route将显示在地图右侧的面板上（从infowindow的地址到用户的当前地址） 下面是我的代码。如果您单击商店A的“获取方向”，您将在地图旁边的面板上看到一条路线 如果我单击其他按钮，它会显示“ 未捕获的TypeError:无法读取null的属性“addEventListener” 在ugg 我现在一直在寻找这些按钮。。。有人能给我一些想法吗Javascript 单击google地图信息窗口中按钮的事件,javascript,html,google-maps,Javascript,Html,Google Maps,我想为google marker infowindow中的按钮设置单击事件，这样当用户单击“获取方向”按钮时，google route将显示在地图右侧的面板上（从infowindow的地址到用户的当前地址） 下面是我的代码。如果您单击商店A的“获取方向”，您将在地图旁边的面板上看到一条路线 如果我单击其他按钮，它会显示“ 未捕获的TypeError:无法读取null的属性“addEventListener” 在ugg 我现在一直在寻找这些按钮。。。有人能给我一些想法吗 <
<!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>
门店位置
#地图{
宽度：60%；
高度：650px；
左缘：4%；
利润率最高：2%
}
#右面板{
字体系列：“机器人”，“无衬线”；
线高：30px；
高度：650px；
浮动：对；
宽度：30%；
溢出：自动；
利润率最高：2%；
高度：650px；
保证金权利：4%；
}
@媒体印刷品{
#地图{
高度：650px；
左缘：4%；
宽度：60%；
}
#右面板{
浮动：对；
高度：650px；
}
}
门店位置
// 初始化地图
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（49.0020285，-97.2347275），缩放：4
});
变量存储位置=[
{markerId:1，标题：“点击查看位置详细信息”，LatLng:new google.maps.LatLng（53.483710，-113.483230），contentString:“存储A”+”div>Edmonton AB，T6E 5C5，加拿大“+”获取方向“，
{markerId:2，标题：“点击查看位置详细信息”，LatLng:new google.maps.LatLng（50.036490，-110.667030），contentString:“商店B”+”加拿大T1A 2Z8医学帽AB“+”获取方向“，
{markerId:3，标题：“点击查看位置详细信息”，LatLng:new google.maps.LatLng（49.262760，-123.004020），contentString:“商店C”+”Burnaby BC，V5C 5T3，加拿大“+”获取方向“}]
变量标记=[]
对于（变量i=0；i未捕获类型错误：无法读取以下行中null的属性“addEventListener”：
document.getElementById("gDirection").addEventListener('click', function calcRoute(){
因为DOM中没有具有id=“gDirection”
的元素
按钮的定义如下：
<button class="gDirection">Get Directions</button>
html，
身体{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
#地图{
宽度：60%；
身高：80%；
左缘：4%；
利润率最高：2%
}
#右面板{
字体系列：“机器人”，“无衬线”；
线高：30px；
身高：80%；
浮动：对；
宽度：30%；
溢出：自动；
利润率最高：2%；
高度：650px；
保证金权利：4%；
}
@媒体印刷品{
#地图{
身高：6
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);
}
});
})
})