如何使用javascript谷歌地图api打开信息窗口
How to open infowindows with javascript Google maps api
下面的代码显示了我要做的事情。我试图通过单击createList（）中创建的li元素来打开每个信息窗口。这不起作用。。它显示"标记"没有定义，我理解这一点，但我不知道如何纠正这一点。您可以在此处查看源代码和实时地图：http://home.messiah.edu/~dw1248/dev/lodgingTest.html
感谢您的帮助。提前谢谢！
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Roboto, Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}
.list {
width: 25%;
height: 75%;
z-index: 2;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
font-size: 0.82em;
padding-left: 8px;
padding-right: 8px;
padding-top: 48px;
overflow: scroll;
}
li {
list-style-type: none;
}
.listHeader {
width: 25%;
height: 40px;
padding-left: 8px;
padding-right: 8px;
z-index: 3;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
}
.listHeader h1 {
text-align: center;
font-size: 1em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
var map;
var service;
var infowindow;
function initMap() {
var messiah = {
lat: 40.158350,
lng: -76.987454
};
var center = {
lat: 40.158350,
lng: -77.076
};
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 11
});
var marker = new google.maps.Marker({
position: messiah,
map: map,
title: 'Messiah College'
});
var request = {
location: messiah,
radius: 10000,
type: ['lodging']
}
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
infowindow = new google.maps.InfoWindow();
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach(createMarker);
results.forEach(createList);
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.gstatic.com/mapfiles/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
},
position: place.geometry.location
});
///////////Look Here To Start Next Time
marker.addListener('click', function() {
var request = {
reference: place.reference
};
service.getDetails(request, function(details, status) {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
});
}
function createList(place) {
var request = {
reference : place.reference,
};
service.getDetails(request, function(details, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
$('.list').append('<li class="listItem">' + details.name + '</li><br/>');
$('.listItem').click(function() {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
createList(place);
}, 200);
}
});
}
window.onload = initMap;
</script>
</head>
<body>
<div id="map">
</div>
<div class="listHeader">
<h1>Lodging List</h1>
</div>
<div class="list">
<div>
</body>
</html>
有两件事，如果你想与标记交互，你应该把它们的引用放在某个地方。这就是下面标记的原因（_M）。此外，您错误地分配了单击事件。您正在多次分配事件。希望这有帮助，请检查下面的代码。
或者在这里工作：http://codepen.io/ravish_hacker/pen/pyeMbL
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Roboto, Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}
.list {
width: 25%;
height: 75%;
z-index: 2;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
font-size: 0.82em;
padding-left: 8px;
padding-right: 8px;
padding-top: 48px;
overflow: scroll;
}
li {
list-style-type: none;
}
.listHeader {
width: 25%;
height: 40px;
padding-left: 8px;
padding-right: 8px;
z-index: 3;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
}
.listHeader h1 {
text-align: center;
font-size: 1em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
var _markers = [];
var map;
var service;
var infowindow;
function initMap() {
var messiah = {
lat: 40.158350,
lng: -76.987454
};
var center = {
lat: 40.158350,
lng: -77.076
};
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 11
});
var marker = new google.maps.Marker({
position: messiah,
map: map,
title: 'Messiah College'
});
var request = {
location: messiah,
radius: 10000,
type: ['lodging']
}
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
infowindow = new google.maps.InfoWindow();
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
createList(results[i], i);
}
//results.forEach(createMarker);
//results.forEach(createList);
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.gstatic.com/mapfiles/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
},
position: place.geometry.location
});
_markers.push(marker);
///////////Look Here To Start Next Time
marker.addListener('click', function() {
var request = {
reference: place.reference
};
service.getDetails(request, function(details, status) {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {
content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'
}
if (!!details.rating) {
content += '<br>' + 'Rating: ' + details.rating
}
infowindow.setContent(content);
infowindow.open(map, marker);
});
});
}
function createList(place, index) {
var request = {
reference: place.reference,
};
service.getDetails(request, function(details, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
$('.list').append('<li class="listItem" id = "' + details.place_id + '"">' + details.name + '</li><br/>');
$('#' + details.place_id).click(function() {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {
content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'
}
if (!!details.rating) {
content += '<br>' + 'Rating: ' + details.rating
}
infowindow.setContent(content);
console.log(index);
infowindow.open(map, _markers[index]);
});
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
createList(place);
}, 200);
}
});
}
window.onload = initMap;
</script>
</head>
<body>
<div id="map">
</div>
<div class="listHeader">
<h1>Lodging List</h1>
</div>
<div class="list">
<div>
</body>
</html>
相关文章：
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上，而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5）使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息
