Google maps 如何使用GoogleMapsJavaScriptAPI V3设置infoWindow加载内容
现在我正在为一个客户的网站开发“位置”页面,该页面显示了他们四个位置的名称作为链接。链接列表下方是谷歌地图画布,其中为每个位置添加了标记和信息窗口。加载时,地图默认为第一个位置标记的位置,并且应该打开该标记的信息窗口。单击位置名称应将地图平移到相应的标记,并打开信息窗口 我使用的谷歌地图的例子非常准确——我已经注释掉了map.fitBounds(bounds);线和整个边界都在下面。代替监听器,我添加了map.panTo()以转到第一个标记的位置,并在mapOptions中添加了zoom:14。以下是我的全部代码:Google maps 如何使用GoogleMapsJavaScriptAPI V3设置infoWindow加载内容,google-maps,google-maps-api-3,infowindow,Google Maps,Google Maps Api 3,Infowindow,现在我正在为一个客户的网站开发“位置”页面,该页面显示了他们四个位置的名称作为链接。链接列表下方是谷歌地图画布,其中为每个位置添加了标记和信息窗口。加载时,地图默认为第一个位置标记的位置,并且应该打开该标记的信息窗口。单击位置名称应将地图平移到相应的标记,并打开信息窗口 我使用的谷歌地图的例子非常准确——我已经注释掉了map.fitBounds(bounds);线和整个边界都在下面。代替监听器,我添加了map.panTo()以转到第一个标记的位置,并在mapOptions中添加了zoom:14。
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
// Define some styles for the colors/look.
// Generate styles here: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
var styles = [ { "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [ { "color": "#abce80" } ] },{ "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#749f71" } ] },{ "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#99c26e" }, { "weight": 0.6 } ] },{ "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#eaf5a1" }, { "weight": 1.5 } ] },{ "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#5b5b3e" } ] },{ "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "color": "#a9d07f" } ] },{ "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5ffa8" } ] },{ "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#aee3e0" } ] },{ "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#806e4e" }, { "lightness": 27 } ] },{ } ];
var mapOptions = {
mapTypeId: 'roadmap',
styles: styles,
zoom:14
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Multiple Markers
var markers = [
<?php if( get_field('locations') ): ?>
<?php while( has_sub_field('locations') ): $map_info = get_sub_field('map_location'); ?>
['<?php echo $map_info['address'] ?>',<?php echo $map_info['lat'] ?>,<?php echo $map_info['lng'] ?>],
<?php endwhile; ?>
<?php endif; ?>
];
mapCenter = new google.maps.LatLng(markers[0][1],markers[0][2]);
//console.log(mapCenter);
// Info Window Content
var infoWindowContent = [
<?php if( get_field('locations') ): ?>
<?php while( has_sub_field('locations') ): ?>
['<div class="google-map-tooltip">' +
'<strong><?php echo get_sub_field('pin_heading'); ?></strong>' +
'<p><?php echo str_replace('<br />','<br />\\',get_sub_field('address')); ?></p>' +
'</div>'],
<?php endwhile; ?>
<?php endif; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: '<?php echo IMAGES; ?>/icon-map-marker.png',
});
if( i==0 ){ first_marker = marker; }
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
//map.fitBounds(bounds);
}
//Move map to first tab's location
map.panTo(mapCenter);
console.log(first_marker);
infoWindow.open(map,first_marker);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
/*var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});*/
}//END initialize()
google.maps.event.addDomListener(window, 'load', initialize);
这就是为什么我知道在添加标记后在哪里使用panTo()映射,但是我不知道如何使用setContent()向这个标记添加信息框,如果这是我需要解决的问题的话。有人能帮我在第一个标记上获取信息框的内容集,然后将信息框作为地图的“打开状态”打开吗?可能的选项
在infoWindow.open()之前设置内容
infoWindow.setContent(infoWindowContent[0][0]);
infoWindow.open(map,first_marker);
点击标记:
google.maps.event.trigger(first_marker,'click');
infoWindow.setOptions({
content:infoWindowContent[0][0],
map:map,
position:first_marker.getPosition()
});
设置选项:
google.maps.event.trigger(first_marker,'click');
infoWindow.setOptions({
content:infoWindowContent[0][0],
map:map,
position:first_marker.getPosition()
});
谢谢这帮了我很大的忙,我得到了所需的一切。我仍然不明白它本身是如何工作的-我现在的主要问题是它如何知道哪个infoWindow被分配给哪个标记。我从未见过像var infoWindow=new google.maps.infoWindow(),marker,I代码>一个变量分配了多个值(甚至还没有为此声明)。我也不明白标记侦听器是如何返回函数的,只是以前从未见过。我讨厌Javascript:p这里只有一个信息窗口,变量marker
和I
将作为参数传递给一个(所谓的自执行匿名)函数,该函数基于这些参数创建(并返回)另一个(非匿名)函数。