js 全局變數失敗？

js javascript

火爆浪子 2018-07-19 22:45:43 ‧ 2751 瀏覽

分享至

navigator.geolocation.getCurrentPosition(successCallback);

    function successCallback(position){
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
    }

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat, lng: long},
        zoom: 8
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"
    async defer></script>

更新代碼～
這樣要怎麼把lat跟long 丟到initMap？

看更多先前的討論...收起先前的討論...

wingkawa iT邦新手 3 級 ‧ 2018-07-20 00:12:07 檢舉

看起來你沒有呼叫 successCallback() 啊，當然不會執行囉

Homura iT邦高手 1 級 ‧ 2018-07-20 00:29:51 檢舉

window.lat和 window.long是你自訂的屬性?

Homura iT邦高手 1 級 ‧ 2018-07-20 00:32:46 檢舉

ㄜ..我懂了你認為window裡面的屬性是全域變數對嗎..

小碼農米爾 iT邦高手 1 級 ‧ 2018-07-20 00:52:56 檢舉

getCurrentPosition 這個函數應該是非同步的，完成後才會呼叫 successCallback。

因此程式的流程是:
getCurrentPosition -> alert -> successCallback

呼叫 alert 的時候 lat 和 long 還沒被創建，所以會印不出來。

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-20 11:36:03 檢舉

已更新

小碼農米爾 iT邦高手 1 級 ‧ 2018-07-20 12:32:15 檢舉

var map;
function initMap() {
navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude;
var long = position.coords.longitude;

map = new google.maps.Map(document.getElementById('map'), {
center: { lat: lat, lng: long },
zoom: 8
});
});
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Homura

iT邦高手 1 級 ‧ 2018-07-20 00:37:03

最佳解答

在successCallback裡面呼叫initMap不就好了...

navigator.geolocation.getCurrentPosition(successCallback);

    function successCallback(position){
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        initMap(lat,long);
    }

    var map;
    function initMap(lat,long) {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat, lng: long},
        zoom: 8
      });
    }

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-20 11:35:55 檢舉

已更新

Homura iT邦高手 1 級 ‧ 2018-07-20 12:51:53 檢舉

asys0512
改了...

火爆浪子 iT邦研究生 1 級 ‧ 2018-07-20 13:23:19 檢舉

怪了他說：InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

Homura iT邦高手 1 級 ‧ 2018-07-20 14:34:19 檢舉

asys0512
這篇該不會是你說的問題吧?
https://stackoverflow.com/questions/44878472/errorinvalidvalueerror-setcenter-not-a-latlng-or-latlngliteral-in-property-l

登入發表回應

joneshong

iT邦新手 5 級 ‧ 2018-07-31 10:38:06

大大您好，您標題下”全域(局)變數失敗“
可我在您的程式碼中沒看到全域變數
successCallback 中您宣告兩個“區域變數”
所以在initMap 中您想使用lat 和long 兩個變數找不到是正常的！
這是“區域(Scope)”不同導致的結果

小弟不只是想幫您解決問題
想幫您建立正確的“全域變數(golbal)”和“區域變數(local)”觀念
這題解法通常有兩種
一種H大已經提供是function call function的做法
一種就是正確的宣告全域變數並使用它(如下)

//宣告全域變數lat, long, map
var lat, long, map;

navigator.geolocation.getCurrentPosition(successCallback);

    function successCallback(position){
        //把座標經緯度assign到全域變數
        lat = position.coords.latitude;
        long = position.coords.longitude;
        initMap(lat,long);
    }

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        //使用全域變數中的lat, long
        center: {lat: lat, lng: long},
        zoom: 8
      });
    }