简单地说,我似乎能够编写代码来为弹出信息窗口创建一个可点击的标记,或者获取返回的标记的边界并重置地图范围和缩放级别。我似乎无法将两者结合起来。 我下面的示例将很好地将地图的范围设置为查询结果。 但是我不太清楚如何将 addListener 事件包含到标记中,因为我的循环是如何构造的,并且在 var mapOptions 中,我设置了中心: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);
});
仅供参考,我也尝试过组织部分代码,如下所示。 这非常适合将点击事件添加到标记,但是我似乎无法使用我的中心:gbounds.getCenter() 或 map.fitBounds() 元素 b/c 首先设置 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:让它工作。Tyler 的代码中确实有一个错字,但很小。我不确定我能多好地使用这段代码并对其进行扩展,因为我对 jQuery 不是很精通,但这是一个开始。我正在努力解决的一件事是在返回零标记时如何处理地图。在我的查询中可能无法返回任何记录。发生的情况是地图绘制但它在海洋中间居中并放大。我认为它应该默认为我设置的中心(中心:新的 google.maps.LatLng(39, -94.1) 但它没有。
Replace:
var $markers = $container.find(".map-marker");
with
var $markers = $container.find(".mapMarker");