点击时显示地标名称

Question

所以在我的代码中，我有一个基于缩放级别的函数，它将在地图上显示某个 kml 文件。当我添加行时效果很好

event.preventDefault();

当我点击一个多边形或使用我的链接平移到它时，它允许缩放检查与该线一起工作，我从解析 kml 文件中获得它不再弹出地标名称。谁能告诉我这是为什么？

    var map = null;
var KMLLayer = null;
var KMLayer2 = null;
var item = "";
var nav = [];
var panToPoint;
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng( 38.04798015658998, -84.59683381523666),
  zoom: 16,
  disableDefaultUI: true,
  zoomControl: true,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
    KMLLayer = new google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml'}, kmlOptions);
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml'},kmlOptions);

    KMLLayer.setMap(map);
    google.maps.event.addListener(map, "zoom_changed",function() {
    //below is the line that prevents the labels to appear, needs to be there to allow the second kml layer to be displayed
    event.preventDefault();
    if (!!map){
        var zooma = map.getZoom();
        if (zooma < 16){
            if (!!KMLLayer2.getMap()) KMLLayer2.setMap(null);
            if (!KMLLayer.getMap()) KMLLayer.setMap(map);
        }
        else{
            if (!KMLLayer2.getMap()) KMLLayer2.setMap(map);
            if (!!KMLLayer.getMap()) KMLLayer.setMap(null);
        }
    }
});
}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){
    //initialise a map
    initialize();

    $.get("https://s3-us-west-2.amazonaws.com/keeneland-concourse-assets/Keenelandlayer1.kml", function(data){
    //$.get("/img/Keenelandlayer2.kml", function(data){
        var html = "";
        var test = "";
        //loop through placemarks tags
        $(data).find("Placemark").each(function(index, value){
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            place = $(this).find("name").text();
            test = "test";
            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            });
            //output as a navigation
            html += "<li>" + place + "</li>";
        })
        //output as a navigation
        $(".navigation").append(html);
        //bind clicks on your navigation to scroll to a placemark
        $(".navigation li").bind("click", function(){
            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat);
            map.panTo(panToPoint);
        });
    });
});

 $(document).ready(function(){
    //initialise a map
    initialize();

    $.get("https://s3-us-west-2.amazonaws.com/keeneland-concourse-assets/Keenelandlayer2.kml", function(data){
    //$.get("/img/Keenelandlayer2.kml", function(data){
        var html = "";
        var test = "";
        //loop through placemarks tags
        $(data).find("Placemark").each(function(index, value){
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            place = $(this).find("name").text();
            test = "test";
            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            });
            //output as a navigation
            html += "<li>" + place + "</li>";
        })
        //output as a navigation
        $(".navigation").append(html);
        //bind clicks on your navigation to scroll to a placemark
        $(".navigation li").bind("click", function(){
            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat);
            map.panTo(panToPoint);
        });
    });
}); 

Answer 1

event.preventDefault() 不正确，即生成 javascript 错误。

Uncaught TypeError: Cannot read property 'preventDefault' of undefined 

working jsfiddle

您的 KmlLayer 构造函数的语法不正确（kmlOptions 被忽略）：

google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml',suppressInfoWindows: false,
preserveViewport: true,
map: map});
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml',suppressInfoWindows: false,
preserveViewport: true,
map: map});