从 google 地图 API 外部控制标记信息窗口
Control marker infowindow from outside of google maps API
我正在尝试在单击地图外部的元素时打开 google 地图标记的信息 window。我见过几个类似的问题,但没有看到有效的答案。
这是我的代码:
html:
<div id="map_canvas"></div>
<div id="names_div"></div>
脚本:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var names_html = "";
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + locations.length + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>" ;
};
document.getElementById("names_div").innerHTML = names_html;
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function myclick(i) {
google.maps.event.trigger(locations[i], "click");
}
我认为是 "names_html +=..." 行和 "function myclick(i) {..." 行之间的交互导致了问题。
此外,我只能让 names_div 的 html 人口与标记循环的单独循环一起工作。这也可能是问题所在!
谢谢,非常感谢帮助。
我在发布的代码中遇到 javascript 错误:Uncaught TypeError: Cannot read property '__e3_' of undefined
。有两个问题:
locations[i]
不是对 google.maps.Marker
对象的引用(您不能在其上触发 click
事件并期望它做任何有用的事情)。您需要保留对标记的引用(比如在一个名为 gmarkers
的数组中,然后在这些标记上触发 click
事件:
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
locations.length
永远不会改变。您需要将侧边栏链接编码为:
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};
Working example (not based on your code)
代码片段:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var names_html = "";
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};
document.getElementById("names_div").innerHTML = names_html;
var infowindow = new google.maps.InfoWindow();
var marker, i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%;
width: 80%;
float: left;
}
#names_div {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div id="names_div"></div>
我正在尝试在单击地图外部的元素时打开 google 地图标记的信息 window。我见过几个类似的问题,但没有看到有效的答案。 这是我的代码:
html:
<div id="map_canvas"></div>
<div id="names_div"></div>
脚本:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var names_html = "";
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + locations.length + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>" ;
};
document.getElementById("names_div").innerHTML = names_html;
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function myclick(i) {
google.maps.event.trigger(locations[i], "click");
}
我认为是 "names_html +=..." 行和 "function myclick(i) {..." 行之间的交互导致了问题。
此外,我只能让 names_div 的 html 人口与标记循环的单独循环一起工作。这也可能是问题所在!
谢谢,非常感谢帮助。
我在发布的代码中遇到 javascript 错误:Uncaught TypeError: Cannot read property '__e3_' of undefined
。有两个问题:
locations[i]
不是对google.maps.Marker
对象的引用(您不能在其上触发click
事件并期望它做任何有用的事情)。您需要保留对标记的引用(比如在一个名为gmarkers
的数组中,然后在这些标记上触发click
事件:
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
locations.length
永远不会改变。您需要将侧边栏链接编码为:
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};
Working example (not based on your code)
代码片段:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var names_html = "";
for (i = 0; i < locations.length; i++) {
names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};
document.getElementById("names_div").innerHTML = names_html;
var infowindow = new google.maps.InfoWindow();
var marker, i;
var gmarkers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%;
width: 80%;
float: left;
}
#names_div {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div id="names_div"></div>