如何使用 Google Maps Javascript API V3 在加载时设置 infoWindow 内容

Posted 2023-03-16

【中文标题】如何使用 Google Maps Javascript API V3 在加载时设置 infoWindow 内容

【英文标题】：How to set infoWindow contents on load using Google Maps Javascript API V3

【发布时间】：2014-03-04 09:06:56

【问题描述】：

现在，我正在为客户网站的“位置”页面工作，该页面将其四个位置的名称显示为链接。链接列表下方是 Google 地图画布，其中为每个位置添加了标记和信息窗口。加载时，地图默认为第一个位置标记的位置，并且应该打开该标记的信息窗口。单击位置名称应将地图平移到相应的标记并打开信息窗口。

我正在使用下面的谷歌地图示例 - http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ 我已经注释掉了 map.fitBounds(bounds);行和其下方的整个 boundsListener。代替侦听器，我添加了 map.panTo() 以转到第一个标记的位置，并将 zoom:14 添加到 mapOptions。这是我的完整代码：

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);

代码的工作原理是添加标记并且地图从正确的标记开始。如果单击标记，则会显示正确的信息窗口。但是，我想要发生的是，不仅地图从第一个标记位置开始，而且还需要打开标记 infoWindow。您将在该示例代码中注意到的问题是，在标记的单击侦听器中调用 infoWindow.setContent() 之前，永远不会设置 infoWindow 内容。换句话说，在单击它们之前，infoWindows 实际上没有任何内容。因此，当我在第一次显示地图时尝试在第一个标记上使用 infoWindow.open() 时，从技术上讲，它会打开 infoWindow，但您只能看到工具提示点，而没有工具提示气泡的其余部分，因为内容没有尚未通过点击事件添加。

在 ma​​rker 被声明为新的 Marker 对象之后，我设法通过将此行添加到 for 循环中来确定第一个标记：

if( i==0 ) first_marker = marker; 

这就是我知道在添加标记后在哪里使用 panTo() 地图的方式，但我无法弄清楚如何使用 setContent() 向该标记添加 infoBox，如果这甚至是我需要解决的问题.谁能帮我在第一个标记上获取 infoBox 的内容集，然后将 infoBox 作为地图的“打开状态”打开？

【参考方案1】：

可能的选择

在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()
);

【讨论】：

谢谢！这对我有很大帮助，我可以根据需要完成所有工作。

我仍然不明白它本身是如何工作的——我现在的主要问题是它如何知道哪个 infoWindow 被分配给哪个标记。我从未见过像var infoWindow = new google.maps.InfoWindow(), marker, i; 这样的语法，其中多个值被分配给一个变量（而且它们甚至还没有被声明）。我也不明白标记侦听器如何返回一个函数，只是以前从未见过。我不擅长 javascript :P

只有 1 个信息窗口，变量 marker 和 i 将作为参数传递给一个（所谓的自执行匿名）函数，该函数创建（并返回）另一个（匿名）基于这些参数的函数。