个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 12:28:05 24 4
gpt4 key购买 nike

我正在尝试使用地理位置来确定用户位置并定期更新。除了我的位置之外， map 上还会显示其他标记。我目前无法显示我的位置标记并从 google map API InvalidValueError: setMap: not an instance of 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>

最佳答案

您必须在函数 setCurrentPosition() 中使用有效的 map 对象，而不仅仅是字符串: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);

关于javascript - 无法显示和更新我的位置标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24085174/

24 4 0
文章推荐： javascript - php 值在 javascript 中不会改变
文章推荐： javascript - 正常测试时，在每条指令中执行并行def
文章推荐： javascript - 在javascript中制作anagrams生成器仅查找列表中包含的单词
文章推荐： javascript - 尝试创建一个可重用的函数并将结果显示在 div 中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com