Google Maps Javascript V3地理位置 - 除非收到警报,否则无法访问initialLocation变量 [英] Google Maps Javascript V3 geolocation - cannot access initialLocation variable unless alerted

查看:95
本文介绍了Google Maps Javascript V3地理位置 - 除非收到警报,否则无法访问initialLocation变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果已经得到答复,我表示歉意 - 我在StackOverflow和其他地方查找了几个小时,但无法弄清楚。



我是尝试使用Google Maps V3地理位置功能( Google Maps JavaScript API V3 - 检测用户的位置),并想要在地图居中后添加一个简单的中心标记。



如果我在initialize函数的结尾,它似乎没有访问initialLocation变量:

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

但是,如果我在此之前提醒initialLocation,它就会有效。



以下是完整的代码,与Google的示例几乎相同:

  var initialLocation; 
var siberia = new google.maps.LatLng(60,105);
var newyork = new google.maps.LatLng(40.69847032728747,-73.9514422416687);
var browserSupportFlag = new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();

函数initialize(){
var myOptions = {
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(map_canvas),myOptions);

//尝试W3C Geolocation方法(首选)
if(navigator.geolocation){
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position){
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
contentString =找到的位置使用W3C标准;
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
},function(){
handleNoGeolocation(browserSupportFlag);
});
} else if(google.gears){
//尝试Google Gears Geolocation
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(position(position)){
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
contentString =使用Google Gears找到的位置;
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
},function (){
handleNoGeolocation(browserSupportFlag);
});
} else {
//浏览器不支持地理定位
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}

// alert(initialLocation);

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


函数handleNoGeolocation(errorFlag){
if(errorFlag == true){
initialLocation = newyork;
contentString =错误:地理位置服务失败。;
} else {
initialLocation = siberia;
contentString =错误:您的浏览器不支持地理定位,您是否在西伯利亚?;
}
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}

以上不会添加标记,但是如果您取消注释alert (initialLocation);,它就会起作用。



这是为什么?我怀疑这是一个范围问题,但我不确定。



(对于我的应用程序来说,initialLocation变量可以在if(navigator)之外访问。 geolocation){block)

谢谢!

解决方案

,getCurrentPosition()是异步的,这意味着您在调用中作为参数提供的函数()将在位置确定后运行。所以initialLocation不会立即设置,只要调用这些回调函数就会设置它。



你需要做的是移动

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

在这个函数里面是这样的。

 navigator.geolocation.getCurrentPosition(function(position){
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
contentString =使用W3C标准找到的位置;
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open (map);
var marker = new google.maps.Marker({
position:initialLocation,
map:map
});
},function() {
handleNoGeolocation(browserSupportFlag);
});

正如您在示例中所看到的,它们不会对这些回调函数外的initialLocation执行任何操作。


apologies if this has been answered already - I've looked for a few hours on StackOverflow and elsewhere, and can't figure it out.

I'm trying the Google Maps V3 geolocation function (Google Maps Javascript API V3 - Detecting the User's Location), and wanted to add a simple centre marker (amongst other things) after the map has been centered.

If I add the following at the end of the "initialize" function, it doesn't seem to have access to the "initialLocation" variable:

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

However, if I alert the initialLocation just before that, it works.

Here is the full code, almost identical to Google's example:

    var initialLocation;
    var siberia = new google.maps.LatLng(60, 105);
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
    var browserSupportFlag =  new Boolean();
    var map;
    var infowindow = new google.maps.InfoWindow();

    function initialize() {
      var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      // Try W3C Geolocation method (Preferred)
      if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          contentString = "Location found using W3C standard";
          map.setCenter(initialLocation);
          infowindow.setContent(contentString);
          infowindow.setPosition(initialLocation);
          infowindow.open(map);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else if (google.gears) {
        // Try Google Gears Geolocation
        browserSupportFlag = true;
        var geo = google.gears.factory.create('beta.geolocation');
        geo.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
          contentString = "Location found using Google Gears";
          map.setCenter(initialLocation);
          infowindow.setContent(contentString);
          infowindow.setPosition(initialLocation);
          infowindow.open(map);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else {
        // Browser doesn't support Geolocation
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
      }

      //alert(initialLocation);

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

    function handleNoGeolocation(errorFlag) {
      if (errorFlag == true) {
        initialLocation = newyork;
        contentString = "Error: The Geolocation service failed.";
      } else {
        initialLocation = siberia;
        contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
      }
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }

The above will not add a marker, but if you uncomment the line "alert(initialLocation);", it will then work.

Why is this? I suspect it's a question of scope, but I'm not sure.

(It's important to my app that the initialLocation variable is accessible outside of the "if(navigator.geolocation) {" block)

Thanks!

解决方案

The call, getCurrentPosition(), is asynchronous meaning that the function() you provide as a parameter in the call will run once the location is determined. So initialLocation will not be set immediately, it will be set once those callback functions are called.

What you need to do is move the

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

inside that function like this.

navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          contentString = "Location found using W3C standard";
          map.setCenter(initialLocation);
          infowindow.setContent(contentString);
          infowindow.setPosition(initialLocation);
          infowindow.open(map);
          var marker = new google.maps.Marker({
            position: initialLocation, 
            map: map
          });
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });

As you can see in the example, they don't do anything with initialLocation outside of those callback functions.

这篇关于Google Maps Javascript V3地理位置 - 除非收到警报,否则无法访问initialLocation变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆