Map.panTo 不工作

Question

所以我有两个基于不同缩放级别加载的 KML 文件。然后我解析文件并创建应该基于 KML 文件平移到给定 lat lng 的链接。但是，每当我单击其中一个链接时，都会出现此错误：

Uncaught TypeError: Cannot call method 'panTo' of null

我已经检查并且 panToPoint 正在返回 KML 文件中多边形的前两个点的正确值，但是当调用 map.panTo 时，它会给出上面的错误。谁能告诉我这是为什么？

这里是代码

    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
};
var 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(event) {
        //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 zoom = map.getZoom();
            if (zoom < 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);
/////////////////On Click listeners
$(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);
        });
    });
}); 

Answer 1

您的地图变量是初始化函数的本地变量。

working fiddle

在初始化函数中从它前面删除“var”：

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);

// ...