google-maps - 将动画标记与谷歌地图上的信息窗口混合?
问题描述
尝试将两个示例混合在一起 - 带有信息窗口的动画标记。我已经编写了以下代码并对其进行了测试。
错误消息是“无法读取未定义的属性‘打开’” - 但是我看不出为什么这段代码不起作用。
任何人都可以提供一些帮助吗?
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MapDemo.aspx.vb" Inherits="MapDemo.MapDemo" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code></title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -52px;
}
</style>
</head>
<body>
<div id="floating-panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map"></div>
<script>
// If you're adding a number of markers, you may want to drop them on the map
// consecutively rather than all at once. This example shows how to use
// window.setTimeout() to space your markers' animation.
var neighborhoods = [
{lat: 52.511, lng: 13.447},
{lat: 52.549, lng: 13.422},
{lat: 52.497, lng: 13.396},
{lat: 52.517, lng: 13.394}
];
var markers = [];
var map;
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi) ' +
'south west of the nearest large town, Alice Springs; 450 km ' +
'(280 mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 52.520, lng: 13.410}
});
}
function drop() {
clearMarkers();
for (var i = 0; i < neighborhoods.length; i++) {
addMarkerWithTimeout(neighborhoods[i], i * 200);
}
window.setTimeout(SetInfoWindows,2000);
}
function SetInfoWindows() {
for (var i=0;i < markers.length;i++){
markers[i].addListener('click', function () {
infowindow.open(map, markers[i]);
});
}
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function () {
var marker = new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP,
title: 'Uluru (Ayers Rock)'
});
markers.push(marker);
}, timeout);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA23Z01YxR3TQCWrqOD77awx1vOv09a4-Q&callback=initMap">
</script>
</body>
</html>
解决方案
我也收到另一个 javascript 错误:Uncaught ReferenceError: google is not defined
.
生成Cannot read property 'open' of undefined
消息的行在infowindow.open(map, markers[i]);
此代码中;
function SetInfoWindows() {
for (var i=0;i < markers.length;i++){
markers[i].addListener('click', function () {
infowindow.open(map, markers[i]);
});
}
}
该代码的两个问题是:
infowindow
未初始化markers[i]
是一个问题,i
指向markers.length
(这是无效的)
要解决这些问题:
infowindow
在函数内部初始化initMap
。- 用于
this
第二个参数infowindow.open
(它是对单击侦听器函数内的单击标记的引用)。
固定SetInfoWindows
功能:
function SetInfoWindows() {
for (var i=0;i < markers.length;i++){
markers[i].addListener('click', function () {
infowindow.open(map, this);
});
}
}
更新的代码片段:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -52px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code></title>
</head>
<body>
<div id="floating-panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map"></div>
<script>
var neighborhoods = [
{lat: 52.511,lng: 13.447},
{lat: 52.549,lng: 13.422},
{lat: 52.497,lng: 13.396},
{lat: 52.517,lng: 13.394}
];
var markers = [];
var map;
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi) ' +
'south west of the nearest large town, Alice Springs; 450 km ' +
'(280 mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
var infowindow;
function initMap() {
// initialize the infowindow variable once the API has loaded
infowindow = new google.maps.InfoWindow({
content: contentString
});
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 52.520,
lng: 13.410
}
});
}
function drop() {
clearMarkers();
for (var i = 0; i < neighborhoods.length; i++) {
addMarkerWithTimeout(neighborhoods[i], i * 200);
}
window.setTimeout(SetInfoWindows, 2000);
}
function SetInfoWindows() {
for (var i = 0; i < markers.length; i++) {
markers[i].addListener('click', function() {
infowindow.open(map, this);
});
}
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP,
title: 'Uluru (Ayers Rock)'
});
markers.push(marker);
}, timeout);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
</body>
</html>
推荐阅读
- python - Tensorboard train data not same number of steps as validation data
- python-3.x - 在 sale.order.line 上过滤产品 - Odoo
- python - python中的复杂循环
- ruby - 为什么 Set#map 返回一个 Array 而不是另一个 Set?
- python - 将数据框转换为字典,不包括 ID
- node.js - 如何检查节点进程线程数
- graphviz - 带有自循环的graphviz状态机
- javascript - 在节点 js 中对 axios 请求的 Jest 测试
- javascript - 从 SharePoint 列表填充字段的最佳方式是什么?
- wordpress - 使用返回时 Nginx 位置指令不起作用