Google地图:点击按钮即可打开特定的信息窗口 [英] Google map: Open specific Info window on button click
本文介绍了Google地图:点击按钮即可打开特定的信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已将Google地图自定义标记与信息窗口一起使用.我需要添加功能以在用户单击特定按钮时打开信息"窗口.有多个带有单独内容的标记.在这里，我找到了一种通过单击一个按钮来打开单个信息"窗口的解决方案: https://stackoverflow.com/a/18334899/6191987
I have used google map custom marker with info windows. I need to add function to open Info window when user click on specific button. There are multiple markers with separate contents. Here i found a solution to open a single Info window with a single button click: https://stackoverflow.com/a/18334899/6191987
我已经尝试了上述解决方案，但是我不知道如何以单击按钮打开每个特定的信息窗口.
I have tried with the above solution, but i don't know how to target to open each specific Info windows on button click.
这是我尝试过的代码:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.btns {
display: inline-block;
width: 100%;
margin-bottom: 20px
}
.btns a {
display: block;
padding: 10px;
float: left;
background: #eee;
margin-right: 5px;
text-decoration: none;
}
<div class="btns">
<a href="#" onclick="myClick(0);">Open Info Window 1</a>
<a href="#" onclick="myClick(0);">Open Info Window 2</a>
<a href="#" onclick="myClick(0);">Open Info Window 3</a>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap',
styles: [{
elementType: 'geometry',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.stroke',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.fill',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{
color: '#263c3f'
}]
}, {
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#6b9a76'
}]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#38414e'
}]
}, {
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
color: '#212a37'
}]
}, {
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{
color: '#9ca5b3'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#1f2835'
}]
}, {
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{
color: '#f3d19c'
}]
}, {
featureType: 'transit',
elementType: 'geometry',
stylers: [{
color: '#2f3948'
}]
}, {
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [{
color: '#17263c'
}]
}, {
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#515c6d'
}]
}, {
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{
color: '#17263c'
}]
}]
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
content: 'test content one',
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
content: 'test content two',
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
content: 'test content three <a href="http://www.google.com">A link to google</a>',
type: 'library'
}];
var infowindow = new google.maps.InfoWindow({
content: ""
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
content: feature.content,
icon: icons[feature.type].icon,
map: map
});
var content = "<a href='" + feature.content + "'>A link to google</a>";
marker.addListener('click', function() {
infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');
infowindow.open(map, marker);
});
});
}
//on click function
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
JSFiddle: https://jsfiddle.net/vishnuprasadps/3wk7q3fd/
JSFiddle: https://jsfiddle.net/vishnuprasadps/3wk7q3fd/
推荐答案
这是因为markers不是代码中的已定义变量.在代码的顶部，您可以简单地将markers声明为空数组，即:
That is because markers is not a defined variable in your code. At the top of your code, you can simply declare markers as an empty array, i.e.:
var markers = [];
在代码底部进一步向下移动，当您遍历features集合时，必须将标记对象推入该数组，即:markers.push(marker);.在您的代码上下文中，它将看起来像这样:
Further down close to the bottom of your code, when you are iterating through your features collection, you have to push the marker object into this array, i.e.: markers.push(marker);. In the context of your code, it will look something like this:
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
content: feature.content,
icon: icons[feature.type].icon,
map: map
});
var content = "<a href='" + feature.content + "'>A link to google</a>";
marker.addListener('click', function() {
infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');
infowindow.open(map, marker);
});
// Push your marker object into your array
markers.push(marker);
});
这应该起作用:请参见下面的概念验证.注意:我已自由更改了内联JS回调参数，因此您不会为所有3个链接触发相同的标记信息窗口.
And that should work: see proof-of-concept below. Note: I have taken the liberty to change the inline JS callback arguments, so that you will not trigger the same marker info window for all 3 links.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.btns {
display: inline-block;
width: 100%;
margin-bottom: 20px
}
.btns a {
display: block;
padding: 10px;
float: left;
background: #eee;
margin-right: 5px;
text-decoration: none;
}
<div class="btns">
<a href="#" onclick="myClick(0);">Open Info Window 1</a>
<a href="#" onclick="myClick(1);">Open Info Window 2</a>
<a href="#" onclick="myClick(2);">Open Info Window 3</a>
</div>
<div id="map"></div>
<script>
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap',
styles: [{
elementType: 'geometry',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.stroke',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.fill',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{
color: '#263c3f'
}]
}, {
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#6b9a76'
}]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#38414e'
}]
}, {
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
color: '#212a37'
}]
}, {
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{
color: '#9ca5b3'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#1f2835'
}]
}, {
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{
color: '#f3d19c'
}]
}, {
featureType: 'transit',
elementType: 'geometry',
stylers: [{
color: '#2f3948'
}]
}, {
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [{
color: '#17263c'
}]
}, {
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#515c6d'
}]
}, {
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{
color: '#17263c'
}]
}]
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
content: 'test content one',
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
content: 'test content two',
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
content: 'test content three <a href="http://www.google.com">A link to google</a>',
type: 'library'
}];
var infowindow = new google.maps.InfoWindow({
content: ""
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
content: feature.content,
icon: icons[feature.type].icon,
map: map
});
var content = "<a href='" + feature.content + "'>A link to google</a>";
marker.addListener('click', function() {
infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');
infowindow.open(map, marker);
});
markers.push(marker);
});
}
//on click function
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
其他说明:
- 请勿使用内联JS .您只需使用
.addEventListener('click', function() {...}). - 如果您具有任意数量的功能，则可以帮助您获取此集合的长度并动态生成链接
这篇关于Google地图:点击按钮即可打开特定的信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
