Coldfusion + Google Map API v3 — информационное окно и установка границ
-
28-09-2019 - |
Вопрос
Проще говоря, я, кажется, могу написать код, который либо создает интерактивный маркер для всплывающего информационного окна, ЛИБО получает границы возвращенных маркеров и сбрасывает экстент карты и уровни масштабирования.Кажется, я не могу совместить это одно с другим. В моем примере ниже будет удобно установить экстент карты в соответствии с результатами запроса. Но я не совсем понимаю, как включить событие 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 к маркеру но тогда я, похоже, не могу использовать свой center: gbounds.getCenter() или map.fitBounds() элементы b / c mapOptions устанавливаются первыми и передаются в новую переменную map, а 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, но это только начало.Единственное, чего он не делает, с чем я борюсь, - это как работать с картой, когда возвращаются нулевые маркеры.В моем запросе возможно, что никакие записи не могут быть возвращены.Что происходит, так это то, что карта рисуется, но она центрирована и увеличена в середине океана.Я решил, что по умолчанию это должен быть центр, который я настроил (center:новый Google.maps.LatLng(39, -94.1) но это не так.
Replace:
var $markers = $container.find(".map-marker");
with
var $markers = $container.find(".mapMarker");
Решение
Редактировать
На самом деле я только что разобрался с этим месяц или около того назад, вот несколько измененных кодов из того, что сработало у меня, чтобы сделать его более похожим на ваш.
Google Maps API v3 и jQuery 1.4.2 (хотя это должно работать с любой версией jQuery, и перенос его на простой javascript или другую библиотеку должен быть простым делом)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<cfquery name="mi" datasource="xxxx">
SELECT name, lat, long, content
FROM tblName
</cfquery>
<ul id="mapMarkers">
<cfoutput query="mi">
<li class="mapMarker" data-latitude="#mi.lat#" data-longitude="#mi.long#">
<div class="info-window">
<h1 class="name">#mi.name#</a></h1>
<div class="content">#mi.content#</div>
</div>
</li>
</cfoutput>
</ul>
<div id="map"></div>
<script type="text/javascript">
$(function() {
var $container = $("#mapMarkers");
var $map = $("#map");
var $markers = $container.find(".map-marker");
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow({
maxWidth: 300
});
var gmap = new google.maps.Map($map[0], {
zoom: 8
, mapTypeId: google.maps.MapTypeId.ROADMAP
});
$markers.each(function(){
$this = $(this);
var latitude = $this.attr("data-latitude");
var longitude = $this.attr("data-longitude");
var content = $this.find(".info-window").remove().html();
var latlng = new google.maps.LatLng(latitude, longitude);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng
, map: gmap
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(this.map, this);
});
google.maps.event.addListener(gmap, 'click', function() {
infowindow.close();
});
$this.click(function(e, el) {
e.preventDefault();
infowindow.setContent(content);
infowindow.open(gmap, marker);
})
});
if($markers.length > 1)
gmap.fitBounds(bounds);
else
gmap.setCenter(bounds.getCenter());
$container.hide();
});
</script>
ОКОНЧАТЕЛЬНАЯ ПРАВКА
Сначала вы должны переместить карту и mapOptions наверх.Затем внутри вашего цикла просто добавьте addListener на карту для маркера:
<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:"#JSStringFormat(mi.name)#", map:map});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("#JSStringFormat(mi.content)#");
infowindow.open(this.map, this);
});
markers[markers.length] = marker;
</cfoutput>
</cfloop>
На что следует обратить внимание:
Я добавил JSStringFormat к переменным name и content.
При создании маркера есть опция map, к которой вы можете просто добавить "map: карта", чтобы вам не приходилось запускать цикл for внизу.
Кроме того, поскольку теперь вы создаете карту перед маркерами, вы переместите параметры масштабирования и центрирования в самый низ.
if(markers.length > 1)
map.fitBounds(gbounds);
else
map.setCenter(gbounds.getCenter());
Также еще раз напоследок:
Вместо того, чтобы
markers[markers.length] = marker;
Вы можете использовать это
markers.push(marker);
Другие советы
Я не уверен, в чем проблема, но вы можете упростить отладку (и продлить), если вы распределите код JavaScript и ColdFusion. Вы можете написать всю карту логику в JS, а затем использовать CF для создания данных (массив LAT / LNG / TITLE), что будет обработать JS.
<script>
// Data For Map Logic
var points = [];
<cfloop query="...">
<cfoutput>
points.push({lat: #db_lat#, lng: #db_lng#, etc...});
</cfoutput>
</cfloop>
// Logic for setting map extent and creating pop-ups
for (var i = 0; i < points.length; i++) {
// do your magic
}
</script>
Используя этот подход, вы можете полностью устранить CF и базу данных во время тестирования путем жесткого кодирования массива точек.