Question

开始使用Google Maps API V3。我有一个带有一些数据坐标的HTML地方列表。这些地方填充在地图上，但是，我想要发生的是当您点击地图外部的实际链接（即地点1）时，它也会触发信息窗口打开。

HTML：

<div id="map"></div>

<div id="places">
   <div class="map-location" data-coordinates='{"lat" : 40.71837, "long" : -74.00608}'>
     <a href="http://link1.com">Place 1</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71435, "long" : -74.00597}'>
     <a href="http://link2.com">Place 2</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71803, "long" : -74.00305}'>
     <a href="http://link3.com">Place 3</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.74238, "long" : -73.98946}'>
     <a href="http://link4.com">Place 4</a>
   </div>
</div>

JS：

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));
});

如何为每个链接设置点击以触发地图上的infoWindow框？

Answer 1

让你的JS像那样：在函数外部创建一个全局数组：

var infoArray = new Array();
var markerArray = new Array();

并保存infowindow的每个实例：

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });
 markerArray[myLatLng] = otherMarkers;

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));

});

infoArray[myLatLng] = infowindow;

并在HTML上创建一个函数：

<div id="map"></div>

<div id="places">
   <div class="map-location" >
     <a href="http://link1.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 1</a>
   </div>
   <div class="map-location" >
     <a href="http://link2.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 2</a>
   </div>
   <div class="map-location" >
     <a href="http://link3.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 3</a>
   </div>
   <div class="map-location" >
     <a href="http://link4.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 4</a>
   </div>
</div>

并创建一个JS函数：

function infoOpen(lat,lng){
   var myLatLng = new google.maps.LatLng(lat,lng);
   infoArray[myLatLng].open(map,markerArray[myLatLng]);
}

使地图变量也是全局的。

还可以根据您自定义。

Answer 2

此示例正在完成您要执行的操作：

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm

希望这有帮助！

使用Google Maps / JQuery的外部链接触发InfoWindow

2 个答案: