我是 Google Maps API 的新手，但我一直在尝试一项相对简单的任务。显示多边形(来自 kml 并使用 geoXml3 渲染)，然后让 map 放大到用户单击的任何位置。但是，当我单击 map 时，会弹出一个信息窗口(缩放或 map 中心没有变化)。我尝试的 google.maps.event.addListener 函数相对简单。是否由于 kml 层或 geoXml 的使用而没有执行任何操作？ 谢谢!
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
function initialize() {
var options = {
center: new google.maps.LatLng(36.0897,-79.4456),
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("canvas"), options);
var geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
infoWindowOptions: {maxWidth:550,cornerRadius: 15},
});
geoXml.parse("HUC.kml");
google.maps.event.addListener(map, "click", function(event){
map.setZoom(15);
map.setCenter(event.latLng.lat(),event.latLng.lng());
});
}
$(document).ready(initialize);
</script>
<h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1>
<div id="canvas" style="width:1000px; height:500px"></div>
<h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4>
<footer>
<p>Posted by: Megan Mallard <br>
Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p>
</footer>
<html>
最佳答案
问题似乎出在map.setCenter中。它需要一个 LatLng 对象，而不是 2 个双参数。尝试一下:
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
function initialize() {
var options = {
center: new google.maps.LatLng(36.0897,-79.4456),
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 5
};
var infoWindowOpenCallback = function(event){
map.setZoom(15);
map.setCenter(event.latLng);
};
var map = new google.maps.Map(document.getElementById("canvas"), options);
var geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
infoWindowOptions: {maxWidth:550,cornerRadius: 15, openInfoCallback: infoWindowOpenCallback},
});
geoXml.parse("http://www.unc.edu/~mmallard/interact_HUC/HUC.kml");
google.maps.event.addListener(map, "click", function(event){
map.setZoom(15);
map.setCenter(event.latLng);
});
google.maps.event.addListener(geoXml, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
alert(text);
});
}
$(document).ready(initialize);
</script>
<h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1>
<div id="canvas" style="width:1000px; height:500px"></div>
<h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4>
<footer>
<p>Posted by: Megan Mallard <br>
Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p>
</footer>
关于javascript - 在 Google Maps API 中使用事件监听器，当我单击时没有任何反应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26761829/