Просто мне кажется, что я могу написать код, который либо создает кликабельный маркер для всплывающего окна infoWindow, ИЛИ получает границы возвращенных маркеров и сбрасывает экстент карты и уровни масштабирования. Я не могу объединить их. Мой пример ниже прекрасно установит экстент карты в соответствии с результатами запроса. Но я не совсем знаю, как включить событие addListener в маркер, учитывая, как структурирован мой цикл, и что в var mapOptions, я установил center: gbounds.getCenter (). Эти две проблемы, кажется, усложняют мою возможность добавлять события на карту или маркер.
<cfquery name="myquery" datasource="xxxx">
SELECT name, lat, long
FROM tblMain
</cfquery>
<cfset bridgeCoord=arrayNew(1)>
<cfloop query="myquery">
<cfset bridge[CurrentRow] = structNew()>
<cfset bridge[CurrentRow].lat=lat>
<cfset bridge[CurrentRow].long=longX>
<cfset bridge[CurrentRow].name=name>
</cfloop>
<script>
$(document).ready(function() {
var gbounds = new google.maps.LatLngBounds();
var markers = [];
<cfloop index="mi" array="#bridge#">
<cfoutput>
//make the point
var point = new google.maps.LatLng(#mi.lat#,#mi.long#);
gbounds.extend(point);
//make the marker
var marker = new google.maps.Marker({position: point, title:"#mi.name#"});
markers[markers.length] = marker;
</cfoutput>
</cfloop>
var mapOptions = {
zoom:3,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId:google.maps.MapTypeId.ROADMAP,
center:gbounds.getCenter()
};
var map = new google.maps.Map(document.getElementById('myMap'), mapOptions);
map.fitBounds(gbounds);
for(var i=0; i<markers.length; i++) markers[i].setMap(map);
});
Кстати, я также пытался организовать часть кода, как показано ниже. это прекрасно работает для добавления события click к маркеру , но тогда я не могу использовать свой центр: элементы gbounds.getCenter () или map.fitBounds () б / в сначала устанавливаются mapOptions и передается новой переменной карты, и gbounds не был определен этой точкой. Жесткое кодирование широты / долготы по центру: кажется, просто держит его там.
function initialize() {
var gbounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.0,-94.1),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("myMap"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
<cfloop index="mi" array="#bridge#">
<cfoutput>
//make the point
var point = new google.maps.LatLng(#mi.lat#,#mi.long#);
gbounds.extend(point);
//make the marker
var marker = createMarker(point, "#mi.name#", "#mi.name#")
</cfoutput>
</cfloop>
}
map.fitBounds(gbounds);;
function createMarker(latlng, tip, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
title: tip,
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
ОБНОВЛЕНИЕ 10/12 :
Получил это на работу. В коде Тайлера действительно есть опечатка, но она незначительна. Я не уверен, насколько хорошо я могу взять этот код и расширить его, так как я не очень разбираюсь в jQuery, но это только начало. Одна вещь, с которой я не борюсь, это то, как бороться с картой, когда возвращаются нулевые маркеры. Возможно в моем запросе, что никакие записи не могут быть возвращены. То, что происходит, - то, что карта рисует, но она центрирована и увеличена в середине океана. Я полагал, что по умолчанию это должен быть центр, который я настроил (центр: новый google.maps.LatLng (39, -94.1), но это не так.
Replace:
var $markers = $container.find(".map-marker");
with
var $markers = $container.find(".mapMarker");