我一直在为客户创建这张地图，但我觉得有点过头了。到目前为止，我已经设法使用modx动态创建地图标记列表，创建了一个成功运行的自定义图标，我已经按照我喜欢的方式设置了它。但是，我正在寻找以下方面的一些帮助：
自定义图标并未准确指向我想要的位置。我假设iconAnchor变量控制了它。那是对的吗？它的值只是x / y协调的图标吗？我也想知道我的infowindow定位在哪里也受到控制。
当我点击列表中的某个位置时，地图会以该位置为中心，但结果是，我的信息窗口超出了地图的底部。有没有办法让标记图标出现在地图的左上象限中？
我的infowindow最终会有一个大约10-15张图片的列表，旁边有文字，我希望信息窗口滚动。我有这个工作，但是当我点击并向下移动滚动条时，一旦我松开鼠标，它就会停止滚动但是然后按住地图 - 因此，滚动后，地图随着老鼠。知道是什么导致了这个吗？
我最后一个问题是地图在加载后如何从一个点跳到另一个点。它只显示每个位置，然后跳转到下一个位置。是否可以删除此功能并设置一个显示所有标记的起始地图区域？
感谢您的任何建议。
我的代码改编自：http://www.erikwhite.net/gmapjquery.html
这是我目前的代码：
$(document).ready(function(){
var defaultLat = 50.5;
var defaultLon = -1.4;
//code to enable a customer marker on the map
var icon = new GIcon();
icon.image = '/img/icon.png';
icon.iconSize = new GSize (45, 48);
icon.iconAnchor = new GPoint (8, 42);
icon.infoWindowAnchor = new GPoint (43, 6);
//var markers = new GMarker(getLatLng();, icon);
var markers = new Array();
markers[0] = new Array(new GMarker(new GLatLng(LAT, LNG), icon), "TITLE", "title, blurb and a set of images paired with a line of text");
var map = new google.maps.Map2($("#map").get(0));//Initialise google maps
map.setCenter(new GLatLng(defaultLat, defaultLon), 15);//Set location to the default and zoom level
map.disableDoubleClickZoom();//Disable zooming
$.each(markers,function(i,marker){
var delayTime = ((i * 300) / (0.5 * markers.length));//Delay time decreases as number of markers increases
setTimeout(function(){
map.addOverlay(marker[0]);
$("")
.html(markers[i][1])//Use list item label from array
.click(function(){
displayPoint(marker[0], i);
setActive(this);//Show active state
})
.appendTo("#list");
GEvent.addListener(marker[0], "click", function(){
displayPoint(marker[0], i);
setActive(i);//Show active location
});
displayPoint(marker[0], i);
setActive(i);//Show active location
if (i == (markers.length - 1)) {//If last item in array
setTimeout(function(){//Remove active class and fade marker after delay
$("#map_message").fadeOut();
//setActive();
}, 3500);
}
}, delayTime);
});
$("#list").css("opacity","0.2").animate({opacity: 1}, 1100);//Fade in menu
$("#map_message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
function displayPoint(marker, index){
if ($('#map_message').is(':hidden')) {//Allow toggling of markers
$('#map_message').fadeIn();
}
else{//Remove all .active classes and hide markers
$('#map_message').hide();
$(".active").removeClass();
}
//$("#map_message").hide();//Default behaviour, doesn't allow toggling
var moveEnd = GEvent.addListener(map, "moveend", function(){
var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
$("#map_message")
.html(markers[index][2])//Use information from array
.fadeIn()
.css({ top:markerOffset.y, left:markerOffset.x });
GEvent.removeListener(moveEnd);
});
map.panTo(marker.getLatLng());
}
function setActive(el){
$(".active").removeClass();//Remove all .active classes
$("#list").find('li').eq(el).addClass('active');//Find list element equal to index number and set active
$(el).addClass('active');//Set active if list element clicked directly
}
}); //End onReady
<div id="map" style="width: 500px; height: 350px; border: 1px solid #777; ">map</div>
<div id="list"></div>
<div id="map_message"></div>
#map { float:left; margin-left: 180px; width:500px; height:350px; }
#map_message { position:absolute; padding:10px; background:#5dbb46; color:#fff; width:200px; height:180px; overflow:auto; }
#list { float:left; width:150px; background:#acacad; color:#fff; list-style:none; padding:0; }
#list li { padding:8px; }
#list li:hover { background:#bdbdbe; color:#fff; cursor:pointer; cursor:hand; }
答案 0 :(得分：1)
1）自定义图标并未准确指向我想要的位置。
尝试使用MarkerImage类设置图标的位置。
function setMarkers(map) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('../images/myimage.png',
// This marker is 25 pixels wide by 25 pixels tall.
new google.maps.Size(25, 25),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the center at 12, 13.
new google.maps.Point(12, 13));
latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
}
2）当我点击列表中的某个位置时，地图会以该位置为中心，但结果是，我的信息窗口超出了地图的底部。有没有办法让标记图标出现在地图的左上象限中？
我不完全确定你的意思，但地图中心的经纬度不一定与你的标记图标相同。你也可以做多个地图/标记。
或者我可能没有收到您的问题。
3）我没有太多滚动信息的经验，所以也许别人可以回答这个问题。
4）我最后关注的是地图在加载后如何从一个点跳到另一个点。它只显示每个位置，然后跳转到下一个位置。是否可以删除此功能并设置一个显示所有标记的起始地图区域？
实际上，在开始时显示所有标记实际上更容易。我的建议是在http://code.google.com/apis/maps/documentation/javascript/overlays.html#ComplexIcons之后重写你的代码，并从你遵循的示例应用程序中保留并在单击侧链接时调整滚动效果的“displayPoint”函数，这将设置不同的中心并打开信息窗口为了位置。
你的地图“跳跃”的原因是因为代码会迭代每个标记，并在加载时为每个标记调用“displayPoint”。