如何让地图工具提示默认显示，而不是鼠标悬停？
问题描述：
我正在使用以下脚本来显示带有两个标记的地图。如果我将鼠标悬停在标记上，则会弹出一个工具提示。我的问题是我如何获得默认显示的信息，而不是mousehover？如何让地图工具提示默认显示，而不是鼠标悬停？
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(37.1370345, 74.3872165),
zoom: 3,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: true,
scrollwheel: false,
streetViewControl: true,
draggable: true,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#111111"
}, {
"lightness": 50
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
}, {
"lightness": 45
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}],
}
var mapElement = document.getElementById('map1');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Country 1', 39.690642467918366, 39.07426848448813],
['Country 2', 39.682790, 19.764394]
];
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
content: locations[i][0],
icon: myIcon,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
animation: google.maps.Animation.DROP,
optimized: false,
map: map
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
}
}
答
为每个标记创建单独的infowindows并将它们与该标记相关联。在创建它们时打开它们。
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(37.1370345, 74.3872165),
zoom: 3,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: true,
scrollwheel: false,
streetViewControl: true,
draggable: true,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#111111"
}, {
"lightness": 50
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
}, {
"lightness": 45
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}],
}
var mapElement = document.getElementById('map1');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Country 1', 39.690642467918366, 39.07426848448813],
['Country 2', 39.682790, 19.764394]
];
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
var marker = createMarker(locations[i], map, myIcon);
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
function createMarker(location, map, myIcon) {
marker = new google.maps.Marker({
content: location[0],
icon: myIcon,
position: new google.maps.LatLng(location[1], location[2]),
animation: google.maps.Animation.DROP,
optimized: false,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
google.maps.event.trigger(marker, 'mouseover');
return marker;
}html,
body,
#map1 {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map1" style="border: 2px solid #3872ac;"></div>
答
一种方法是将所有标记和信息窗口存储在数组或对象中。这样，您可以在需要时循环并打开/关闭所有（或基于某些条件的某些条件）。
的可能例如：
var myPopups = []; // create an array
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
myPopups.push(infowindow);// add your infowindow to your array
// once you've added all your info windows to your array you
// can loop through them to open all info windows.
for (var i = 0; i < myPopups.length; i++) {
myPopups[i].open(map, marker);
}
记住open方法需要与infowindow作为第二个参数相关的标记，所以你需要存储你的标志了。
+0
你好infowindow.open'，谢谢你的回答，但你可以请更具描述性？ – EnexoOnoma
+0
已更新，以提供更多的探索 – atmd
店的弹出窗口的一个数组/对象，然后简单的调用'每一个 – atmd