Question

我在这里看了很多帖子，但似乎无法弄清楚我做错了什么。关于如何添加链接的任何建议都要从谷歌地图外部打开信息窗口？

我试过......

<a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">Open Info Window</a>

和

function infoOpen(i) {google.maps.event.trigger(gmarkers[i], 'click');}

但没有运气!!

var locations = [
    <?php  $i = 1; while ( have_posts() ) : the_post(); ?>
        <?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
            {
                latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>,
                info : $('#item<?php echo $i; ?>').clone().get(0),

        },
        <?php endif; ?>
    <?php $i++; endwhile; ?>
];


// Enable the visual refresh
google.maps.visualRefresh = true;
var number = '1';
var infowindow = new google.maps.InfoWindow({maxWidth: 200});
var iconBase = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|F2A327|000000';
/* var iconBase = 'http://www.google.com/mapfiles/marker'+number+'.png'; */
var shadow = new google.maps.MarkerImage('/wp-content/themes/digimix/shadow.png', new google.maps.Size(37, 34) );


function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    minZoom: 4,
    maxZoom: 18,
    center: new google.maps.LatLng(41.4758162, -71.29734339999999),
    mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
    panControl: false,
    scaleControl: false,
    zoomControl: true,
    zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
},
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();

//when infowindow is open, close info window when you click on the map
google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
});

for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
        position: locations[i].latlng,
        icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+(i+1)+'|F2A327|000000',
        title: "Click for more information",
        shadow: shadow,
        map: map,
    });


    //extend the bounds to include each marker's position
    bounds.extend(marker.position);


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i].info);
        infowindow.open(map, marker);
      }
    })(marker, i));
}

    //now fit the map to the newly inclusive bounds
map.fitBounds(bounds);}

Answer 1

您没有google.maps.Marker对象的全局gmarkers数组来触发click事件。您需要在实例化标记时创建它。

// in global scope (outside of any function)
var gmarkers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    minZoom: 4,
    maxZoom: 18,
    center: new google.maps.LatLng(41.4758162, -71.29734339999999),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    panControl: false,
    scaleControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //create empty LatLngBounds object
  var bounds = new google.maps.LatLngBounds();

  //when infowindow is open, close info window when you click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
        position: locations[i].latlng,
        icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+(i+1)+'|F2A327|000000',
        title: "Click for more information",
        shadow: shadow,
        map: map,
    });

    gmarkers.push(marker);

    //extend the bounds to include each marker's position
    bounds.extend(marker.position);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i].info);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

  //now fit the map to the newly inclusive bounds
  map.fitBounds(bounds);
}

打开InfoWindow，点击Link，Google Maps API

1 个答案: