Я работал над созданием этой карты для клиента, но я чувствую себя немного над головой.До сих пор мне удавалось использовать modx для динамического создания списка маркеров для карты, создал пользовательский значок, который успешно работает, и у меня есть стиль, который мне нравится.Однако мне нужна помощь по поводу следующего:
Пользовательский значок не указывает точно, куда бы я хотел.Я предполагаю, что переменная iconAnchor управляет этим.Это верно?Являются ли его значения просто координатами x / y значка?Я также хотел бы знать, где также контролируется расположение моего информационного окна.
Когда я нажимаю на местоположение в списке, карта центрируется на этом месте, но в результате мое информационное окно выходит за нижнюю часть окна.карта.Можно ли сделать так, чтобы значок маркера появился в верхнем левом квадранте карты?
В моем информационном окне в конечном итоге будет список из 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; }