【发布时间】：2014-10-02 11:00:22
【问题描述】：
我的代码（Google Maps API 3 JS）here 可以满足我的需求。
除了每个 InfoWindow 的内容都比这大得多。 （而且会有 30 个！）
所以我需要能够为每个信息窗口设置自己的位置。
我已经花了大约 12 个小时尝试了我能在下面的代码中想到的所有组合。
任何人都知道我做错了什么，请：我怀疑它与（之间的关系）有关：
position: winLatLng
在我创建 infowindow 对象以及我如何调用它时：
infowindow.open(map,this);
理想情况下，我想在 winLatLng 中使用数组的第 5 个和第 6 个元素。但我无能为力。
非常感谢任何有时间提出建议的人！
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Foundation 30 Year Anniversary Maps Prototype</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
width: 900px;
height: 700px;
}
</style>
</head>
<body>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?">
</script>
<script type="text/javascript">
var infowindow = null;
var MY_MAPTYPE_ID = 'custom_style';
$(document).ready(function () { initialize(); });
function initialize() {
google.maps.Map.prototype.setCenterWithOffset= function(LatLng, offsetX, offsetY) {
var map = this;
var ov = new google.maps.OverlayView();
ov.onAdd = function() {
var proj = this.getProjection();
var aPoint = proj.fromLatLngToContainerPixel(LatLng);
aPoint.x = aPoint.x+offsetX;
aPoint.y = aPoint.y+offsetY;
map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
};
ov.draw = function() {};
ov.setMap(this);
};
var featureOpts = [{
"featureType": "administrative",
"stylers": [
{ "color": "#848080" },
{ "weight": 0.1 }
] },
{
"featureType": "administrative.country",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "water",
"stylers": [
{ "color": "#C3C3C6"}
] },{
"featureType": "landscape.natural",
"stylers": [
{ "color": "#F0F0F0"}
] },{
}
]
google.maps.visualRefresh=true;
var myLatlng = new google.maps.LatLng(51.30, 0.7);
var centerMap = new google.maps.LatLng(51.30, 0.7);
var mapOptions = {
zoom: 2,
disableDefaultUI: true,
center: centerMap,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var styledMapOptions = {
name: 'Custom Style'
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setCenterWithOffset(myLatlng, 50, 225);
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, sites);
var winLatLng;
infowindow = new google.maps.InfoWindow({
disableAutoPan : true,
position: winLatLng
});
};
var losangelescontentString = 'Los Angeles content';
var portonovocontentstring = 'Porto Novo content';
var florencecontentstring = 'Florence content';
var shackletoncontentstring= 'Shackleton content';
var sites = [
['Los Angeles', 34.054082,-118.24261, losangelescontentString,-17,30],
['Porto Novo', 6.501411,2.604275, portonovocontentstring,-54.054082,0],
['Shackleton', -77.550000, 166.150000, shackletoncontentstring,0,0],
['Florence', 43.773046,11.255901, florencecontentstring,-10,18]
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var winLatLng = new google.maps.LatLng(sites[4], sites[5]);
var marker = new google.maps.Marker({
title: sites[0],
position: siteLatLng,
html: sites[3],
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
</script>
<div id="map_canvas"></div>
</body>
</html>
【问题讨论】：