我想从一个对象数组动态地创建一个链接列表，这些对象数组可以从我的Google地图中的标记控制信息窗口。
例如，我有一个名为businesses的数组，链接应该显示为businesses[0].name, businesses[1].name等…
当你点击链接时，它会显示信息框，就像你点击了标记一样。我还设置了它，当你点击另一个标记时，前一个信息框关闭，新的打开。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 480px }
</style>
</head>
<body>
<div id="map_canvas" style="width:620px; height:480px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow;
(function(){
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker){
this.markers[this.markers.length] = marker;
}
google.maps.Map.prototype.getMarkers = function() {
return this.markers
}
google.maps.Map.prototype.clearMarkers = function() {
if(infowindow) {
infowindow.close();
}
for(var i=0; i<this.markers.length; i++){
this.markers[i].set_map(null);
}
}
})();
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var businesses = new Array();
business = {
name:"Columbia Gorge Blue Grass",
description:"July 22-25, 2010 at the Skamania County Fairgrounds",
address:codeAddress("1003 south 6th Ave, Kelso WA 98626"),
lat:46.72,
lng:-119.55,
url:"http://www.columbiagorgebluegrass.net/",
business_type:"Getaway"
};
businesses[0] = business;
business = {
name:"Chips Casino Palace",
description:"We Deal in Fun! La Center, WA",
lat:45.72,
lng:-121.55,
url:"http://www.chipscasino.com/",
business_type:"Golf"
};
businesses[1] = business;
business = {
name:"Skamania County Fair & Timber Carnival",
description:"August 11-15, 2010 at the Skamania County Fairgrounds",
lat:45.50,
lng:-122.55,
url:"http://www.chipscasino.com/",
business_type:"Wine"
};
businesses[2] = business;
//This is where the map positions to when the page is loaded
var latlng = new google.maps.LatLng(46.88, -120.00);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < businesses.length; i++) {
//alert(i);
if(businesses[i].business_type == "Wine"){
//http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000
var icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png';
}else if(businesses[i].business_type == "Golf"){
var icon = 'http://google-maps-icons.googlecode.com/files/golf.png';
}else{
var icon = 'http://google-maps-icons.googlecode.com/files/festival.png';
}
var latlng = new google.maps.LatLng(businesses[i].lat, businesses[i].lng);
map.addMarker(createMarker(businesses[i].name,latlng));
}
function createMarker(name, latlng) {
var marker = new google.maps.Marker({
position:latlng,
map: map,
icon: icon,
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
console.log();
});
return marker;
}
function codeAddress(address) {
var this_address = address;
geocoder.geocode( { 'address': this_address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
return results[0].geometry.lat;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
$(document).ready(function(){
initialize();
});
</script>
</body>
</html>
我不确定我是否需要添加另一个事件监听器或添加一个函数调用或什么。
如有任何帮助，不胜感激。
谢谢!
您可以将企业id的查找数组保存到指示不同企业的延迟的Google点。当您点击一个链接时，它也会在某个地方显示业务ID。然后，您可以获得适当的latlng，然后调用"new InfoWindow()"，并将适当的"position"作为选项的一部分传入:http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions