Question

我正在尝试使用地理位置来确定用户位置并定期更新。除了我的位置，地图上还会显示其他标记。我目前无法显示我的位置标记并从google maps API中获取此错误 InvalidValueError：setMap：不是Map的实例;而不是StreetViewPanorama的实例。

以下是代码：

<!doctype html>
<html lang="en">

    <head>
        <title>Google maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

           var lat, lon, mapCalled, mapoptions, position, oldPosition, currentposition, iconBase, watchPositionOptions, geoToken, myLocationSymbol, ischiaCenter, myLocationMarker, homeMap, walk1Start, myScroll, errorMsg;
oldPosition = null;


function onBodyLoad(mapP){
    mapCalled = mapP;
    console.log(mapCalled);
    ischiaCenter = new google.maps.LatLng (40.727954, 13.903094);   
    console.log("ischia center" + ischiaCenter);
    console.log("before position is asked");
    navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
    console.log("heading getting heading");
     mapoptions = {
        zoom: 12,
        center: ischiaCenter,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    createMapHome();
}

function onGeoSuccess(position) {
    console.log("starting watch");
     navigator.geolocation.watchPosition(onGeoWatchSuccess, onGeoError, {maximumAge: 4000, enableHighAccuracy: true});
    setCurrentPosition(position);
    }

function onGeoWatchSuccess(position) {
    console.log("geosuccess");
    setMarkerPosition(myLocationMarker, position); 
}

function setCurrentPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    currentposition = new google.maps.LatLng(lat,lon);
    console.log("currentposition " + currentposition);
    /*Create marker for user current position*/
    console.log("Updating location");
    myLocationMarker = new google.maps.Marker({
        position: currentposition,
        map: mapCalled
    });   
    console.log("panning to my location");
    mapCalled.panTo(currentposition);
}

function setMarkerPosition(myLocationMarker, position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    currentposition = new google.maps.LatLng(lat,lon);
    myLocationMarker.setPosition(currentposition);
    }

function createMapHome(){
 //   geoToken = 1;
    console.log("creating home map");
    homeMap = new google.maps.Map(document.getElementById('map_canvas'), mapoptions);
    /*Create marker for walks starting points with info dialog*/

    var walk1Start = new google.maps.LatLng (59.32522, 18.07002);

    var contentString = '<div id="content">'+
        '<div class="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Walk1</h2>'+
        '<img src="images/thumbs/G-87.jpg" width=150 height=150>'+
        '<div id="bodyContent">'+
        '<p>Prima linea di decrizione ' +
        'Senconda linea di decrizione '+
        'Heritage Site.</p>'+

        '</div>'+
        '</div>';

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

    var walk1Marker = new google.maps.Marker ({
        position: walk1Start,
        map: homeMap,
        title: "Walk 1"
    });

    google.maps.event.addListener(walk1Marker, 'click', function() {
        infowindow.open(homeMap,walk1Marker);
    });

    /*Script to adjust map view to all markers*/

    //  Make an array of the LatLng's of the markers you want to show
    var LatLngList = new Array ( ischiaCenter, walk1Start);
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds ();
    //  Go through each...
    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
        //  And increase the bounds to take this point
        bounds.extend (LatLngList[i]);
    }
    //  Fit these bounds to the map
    homeMap.fitBounds (bounds);

    center = homeMap.getCenter();
    google.maps.event.trigger(homeMap, "resize");
    homeMap.setCenter(center);
}


/*Setting up alerts*/

function showAlert (message, title) {
        if (navigator.notification) {
            navigator.notification.alert(message, null, title, 'OK');
        } else {
            alert(title ? (title + ": " + message) : message);
        }
    }


    function onGeoError(error) {
        console.log("geo error", error.code);
        if (error.code==1) {
            showAlert ('Abbiamo bisogno di accedere alla tua posizione. Attiva i servizi di localizzazione nelle impostazoni del tuo dispositivo.', 'Servizi di localizzazione disabilitati');
        } 
        else if (error.code==2) {
            showAlert ('Non siamo riusciti a determinare la tua posizione. Riproveremo tra qualche secondo.', 'Posizione non trovata');
        }
        else if (error.code==3) {
            showAlert ('Non siamo riusciti a determinare la tua posizione. Riproveremo tra qualche secondo.', 'Posizione non trovata');
        }
    }


        </script>
    </head>

    <body onload="onBodyLoad('map_canvas')">
        <div id="map_canvas" style="height:600px;"></div>
    </body>

</html>

Answer 1

您必须在函数setCurrentPosition()中使用有效的地图对象，而不仅仅是字符串：mapCalled必须更改为homeMap：

myLocationMarker = new google.maps.Marker({
    position: currentposition,
    // map: mapCalled
    map: homeMap
});   
console.log("panning to my location");
// mapCalled.panTo(currentposition);
homeMap.panTo(currentposition);

无法显示和更新我的位置标记

1 个答案: