gpt4 book ai didi

javascript - 在 Google Maps API 中使用事件监听器,当我单击时没有任何反应

转载 作者:行者123 更新时间:2023-12-03 11:30:18 26 4
gpt4 key购买 nike

我是 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com