Question

在加载我的网站时，我偶尔会看到一个javascript错误（Uncaught TypeError：无法调用undefined的方法'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);

未捕获的TypeError：无法调用未定义的方法'panTo'

1 个答案: