Google地图，点击链接后打开信息窗口 [英] Google Maps, open info window after click on a link
问题描述
我有这段代码来显示谷歌地图：
< script src =https：//maps.googleapis的.com /地图/ API / JS v = 3.exp&安培;传感器=假>< /脚本>
< script type =text / javascript>
函数initialize（）{
var mapOptions = {
zoom：10，
center：new google.maps.LatLng（40.714364，-74.005972），
mapTypeId：google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map（document.getElementById（googlemap），mapOptions）;
var locations = [
['New York'，40.714364，-74.005972，'http://www.google.com/intl/zh-CN/mapfiles/ms/ micons / green-dot.png']
];
var marker，i;
var infowindow = new google.maps.InfoWindow（）;
$ b google.maps.event.addListener（map，'click'，function（）{
infowindow.close（）;
}）;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google .maps.LatLng（locations [i] [1]，locations [i] [2]），
map：map，
icon：locations [i] [3]
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent （位置[i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< div id =googlemapstyle =width：100％; height：500px;>< / div>
< a href =＃>开启资讯视窗< / a>
这不是最终的代码，因为我想添加更多标记。
问题是，我需要外部链接才能打开标记的信息窗口。
例如：
链接1从标记1打开信息窗口>
链接2从标记2打开信息窗口 -
等...
我需要这样的链接： p>
< a href =javascript：marker（0）>打开信息窗口One< / a>
这是我在jsfiddle中的代码：
http://jsfiddle.net/fJ4jG/3/
我找到了一些解决方案，但我不'不知道如何将这段代码和我的代码一起使用。
它应该像这样工作：
http://www.geocodezip.com/v3_MW_example_map2.html
感谢您的帮助！
它创建了一个存储标记的数组。所以当标记被创建时，它们被推送到标记数组。当你点击链接时，你发送一个索引，其中包含对数组中标记的引用。
所以JavaScript看起来像这样：
var markers = [];
//存储标记的数组
函数initialize（）{
var mapOptions = {
zoom：10，
center：new google.maps.LatLng（40.714364，-74.005972），
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById （googlemap），mapOptions）;
var locations = [
['New York'，40.714364，-74.005972，'http://www.google.com/intl/zh-CN/mapfiles/ms/ micons / green-dot.png']
];
var marker，i;
var infowindow = new google.maps.InfoWindow（）;
$ b google.maps.event.addListener（map，'click'，function（）{
infowindow.close（）;
}）;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google .maps.LatLng（locations [i] [1]，locations [i] [2]），
map：map，
icon：locations [i] [3]
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
//将标记推送到'markers'数组
markers.push（marker）;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
//触发标记点击的函数，'id'是'markers'数组的参考索引。
函数myClick（id）{
google.maps.event.trigger（markers [id]，'click'）;
}
并且在您的HTML a 标签你添加 myClick 这样的功能：
< a href =＃onclick =myClick（0）;>打开信息窗口< / a>
示例： http://jsfiddle.net/fJ4jG/9/
i have this code to display a google map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
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,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="#">Open Info Window</a>
That's not the final code, because i want add more markers.
The problem is, that i need external links to open the info window of a marker.
For Example:
Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...
I need a link something like this:
<a href="javascript:marker(0)">Open Info Window One</a>
Here is my code in jsfiddle: http://jsfiddle.net/fJ4jG/3/
I found couple of solutions, but i don't know how to use this code together with my code. It should work like this: http://www.geocodezip.com/v3_MW_example_map2.html
Thanks for every help!
What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.
So JavaScript looks like this:
var markers = [];
// The array where to store the markers
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
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,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// Push the marker to the 'markers' array
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And in your HTML a tag you add the myClick function like this:
<a href="#" onclick="myClick(0);">Open Info Window</a>
Example: http://jsfiddle.net/fJ4jG/9/
这篇关于Google地图，点击链接后打开信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
