Javascript 在GoogleMapsAPI中使用事件监听器，当我单击_Javascript_Google Maps_Google Maps Api 3

Javascript 在GoogleMapsAPI中使用事件监听器，当我单击

javascript google-maps google-maps-api-3

Javascript 在GoogleMapsAPI中使用事件监听器，当我单击,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我是谷歌地图API新手，但我一直在尝试一项相对简单的任务。显示多边形（来自kml并使用geoXml3渲染），然后让地图放大用户单击的任何位置。但是，当我单击地图时，会弹出一个信息窗口（缩放或地图中心不变）。我尝试的google.maps.event.addListener函数相对简单。是否因为kml层或geoXml的使用，它没有做任何事情？谢谢函数初始化（）{ 变量选项={ 中心：新google.maps.LatLng（36.0897，-79.4456）， mapTypeId:google

我是谷歌地图API新手，但我一直在尝试一项相对简单的任务。显示多边形（来自kml并使用geoXml3渲染），然后让地图放大用户单击的任何位置。但是，当我单击地图时，会弹出一个信息窗口（缩放或地图中心不变）。我尝试的google.maps.event.addListener函数相对简单。是否因为kml层或geoXml的使用，它没有做任何事情？谢谢


函数初始化（）{
变量选项={
中心：新google.maps.LatLng（36.0897，-79.4456），
mapTypeId:google.maps.mapTypeId.HYBRID
};
var map=new google.maps.map（document.getElementById（“canvas”），选项）；
var geoXml=new geoXML3.parser({
地图：地图，
singleInfoWindow：对，
infoWindowOptions:{maxWidth:550，cornerRadius:15}，
});
parse（“HUC.kml”）；
google.maps.event.addListener（映射，“单击”，函数（事件）{
map.setZoom（15）；
setCenter（event.latLng.lat（），event.latLng.lng（））；
}); 
}
$（文档）.ready（初始化）；
选择HUC8多边形
发帖人：梅根·马拉德

目的：让用户与使用GoogleMapsJavaScriptAPI显示的地图交互，并使用geoXML解析kml

问题似乎出在map.setCenter中。它需要一个LatLng对象，而不是两个双参数。试试看：

<!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>


函数初始化（）{
变量选项={
中心：新google.maps.LatLng（36.0897，-79.4456），
mapTypeId:google.maps.mapTypeId.HYBRID，
缩放：5
};
var infoWindowOpenCallback=函数（事件）{
map.setZoom（15）；
地图设置中心（事件设置）；
};
var map=new google.maps.map（document.getElementById（“canvas”），选项）；
var geoXml=new geoXML3.parser({
地图：地图，
singleInfoWindow：对，
infoWindowOptions:{maxWidth:550，cornerRadius:15，openInfoCallback:infoWindowOpenCallback}，
});
geoXml.parse（“http://www.unc.edu/~mmallard/interactu HUC/HUC.kml”）；
google.maps.event.addListener（映射，“单击”，函数（事件）{
map.setZoom（15）；
地图设置中心（事件设置）；
}); 
google.maps.event.addListener（geoXml，'click'，函数（kmlEvent）{
var text=kmlEvent.featureData.description；
警报（文本）；
});
}
$（文档）.ready（初始化）；
选择HUC8多边形
发帖人：梅根·马拉德

目的：让用户与使用GoogleMapsJavaScriptAPI显示的地图交互，并使用geoXML解析kml

您的KML是什么样子的？（HUC.kml）我尝试了您的代码版本，只要注释掉geoXml.parse行，它就可以工作。有什么方法可以显示kml多边形并使用我的addListener功能吗？你能和我分享这个吗。kml？现在试试@Meganmallard这次，如果我在多边形覆盖的区域外单击，我会得到我期望的行为（缩放和新中心）。但是，如果我在州内单击多边形所在的位置，我只会得到一个信息标记，而不会进行缩放。如果您想在单击图层时使用setCenter，则需要在geoxml3 api中搜索此函数。

<!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>