Uncaught TypeError：無法調用未定義的方法'panTo'

Question

我偶爾會看到一個javascript錯誤（Uncaught TypeError：無法調用未定義的方法'panTo'）加載我的網站時。我的網站，作爲參考，是www.nolofo.com。當您加載該頁面時應該發生的事情是確定您的位置並將地圖移動到該位置。有時候這種方式很好，其他時候則沒有。我似乎無法弄清楚這種模式，除非它不起作用，我在javascript日誌中看到這個錯誤消息。也許某些東西沒有按照正確的順序加載？

<script type="text/javascript"> 

// Check to see if this browser supports geolocation. 
if (navigator.geolocation) { 

    // This is the location marker that we will be using on the map. Let's store a reference to it here so that it can be updated in several places. 
    var locationMarker = null; 
    var myLat = null; 
    var myLng = null; 

    // Get the location of the user's browser using the native geolocation service. 
    navigator.geolocation.getCurrentPosition(
     function (position) { 

      // Check to see if there is already a location. There is a bug in FireFox where this gets invoked more than once with a cached result. 
      if (locationMarker){ 
       return; 
      } 

      // Log that this is the initial position. 
      console.log("Initial Position Found"); 

      // Assign coordinates to global variables 
      myLat = position.coords.latitude; 
      myLng = position.coords.longitude; 

      moveToLocation(myLat, myLng); 

     } 

    ); 

} 

// Start the Google Maps implementation 
var map; 
var markersArray = []; 
function initialize() { 
    var mapOptions = { 
     zoom: 13, 
     center: new google.maps.LatLng(40.760779, -111.891047), 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     scaleControl: true 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    // Add all recent listing markers to map 
    <?php 
     foreach ($coordinateArray as $Key => $Value) { 

     $listingQuery = mysql_query(" 
      SELECT 
       Listings.Lat, 
       Listings.Lng, 
       Listings.Title, 
       Listings.Type 
      FROM 
       Listings 
      WHERE 
       Listings.ID='$Key' 
     "); 
     if (!$listingQuery) { 
      die('<p>Error executing query (2) with database!<br />'. 
      'Error: ' . mysql_error() . '</p>'); 
     } 
     $listingArray = mysql_fetch_array($listingQuery); 
      $ListingLat = $listingArray["Lat"]; 
      $ListingLng = $listingArray["Lng"]; 
      $ListingTitle = addslashes($listingArray["Title"]); 
      $ListingType = $listingArray["Type"]; 

     $ListingLatLng = $ListingLat . ", " . $ListingLng; 

    ?> 
    // Marker 
    var myLatLng = new google.maps.LatLng(<?=$ListingLatLng?>); 
    var marker<?=$Key?> = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: "" 
    }); 
    iconFile = 'http://maps.google.com/mapfiles/ms/icons/<?=$Value?>-dot.png'; 
    marker<?=$Key?>.setIcon(iconFile); 

    // Info Window 
    var infowindow<?=$Key?> = new google.maps.InfoWindow({ 
     content: '<b><?=$ListingType?></b><br /><a href="/listing.php?ID=<?=$Key?>"><?=$ListingTitle?></a>' 
    }); 
    google.maps.event.addListener(marker<?=$Key?>, 'click', function() { 
     infowindow<?=$Key?>.open(map, marker<?=$Key?>); 
    }); 
    <?php } ?> 

    // Add a click event handler to the map object 
    google.maps.event.addListener(map, "click", function(event) { 
     // Place a marker 
     placeMarker(event.latLng, event.latLng.lat(), event.latLng.lng()); 

     // Display the lat/lng in your form's lat/lng fields 
     //document.getElementById("lat").value = event.latLng.lat(); 
     //document.getElementById("lng").value = event.latLng.lng(); 
    }); 

    // Add a click event handler to the marker object 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent("Your content here"); 
     infowindow.open(map, this); 
    }); 

} 

function placeMarker(location, lat, lng) { 
    // Remove all markers if there are any 
    deleteOverlays(); 

    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 

    // Add marker in markers array 
    markersArray.push(marker); 

    var contentString = '<a href="/post/start.php?Lat=' + lat + '&Lng=' + lng + '">New Listing</a>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    infowindow.open(map,marker); 

    google.maps.event.addListener(infowindow, "closeclick", function() { 
     deleteOverlays(); // removes the marker 
    }); 

    //map.setCenter(location); 
} 

// Deletes all markers in the array by removing references to them 
function deleteOverlays() { 
    if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(null); 
     } 
     markersArray.length = 0; 
    } 
} 

function moveToLocation(lat, lng) { 
    var center = new google.maps.LatLng(lat, lng); 
    map.panTo(center); 
} 

// The function to trigger the marker click, 'id' is the reference index to the 'markers' array. 
function linkClick(id){ 
    google.maps.event.trigger(markersArray[id], 'click'); 
} 

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

Answer 1

最有可能是因爲你想在地圖已經加載之前，平移地圖。您在加載頁面後立即運行該初始地理定位腳本。聽起來像有時getCurrentPosition()比地圖加載速度更快，有時不是。

你可以做的是在地圖加載後運行你的地理定位。腳本的最後一行是加載地圖時的事件監聽器 - 您也可以將它用於其他位。

裹在函數整個第一部分：

function setupGeoLocator() { 
    // Check to see if this browser supports geolocation. 
    if (navigator.geolocation) { 

     // This is the location marker that we will be using on the map. Let's store a reference to it here so that it can be updated in several places. 
     var locationMarker = null; 
     var myLat = null; 
     var myLng = null; 

     // Get the location of the user's browser using the native geolocation service. 
     navigator.geolocation.getCurrentPosition(
      function (position) { 

       // Check to see if there is already a location. There is a bug in FireFox where this gets invoked more than once with a cached result. 
       if (locationMarker){ 
        return; 
       } 

       // Log that this is the initial position. 
       console.log("Initial Position Found"); 

       // Assign coordinates to global variables 
       myLat = position.coords.latitude; 
       myLng = position.coords.longitude; 

       moveToLocation(myLat, myLng); 

      } 

     ); 

    } 
} 

然後調用它的時候，「負載」事件在地圖上的火災。

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