Google Maps API不会将正确的位置居中

时间:2013-10-22 11:58:17

标签: javascript css html5 google-maps google-maps-api-3


我已经解决了与我的问题相关的每个可能的问题,并尝试了许多解决方案,似乎没有任何帮助。我正在使用Google的Map API,而地图并不是正确的lat long对。它指的是(0,0),它位于南太平洋中部。在对Lat Long对进行地理定位后,它会给出正确的地址 这是我的代码:

 $(document).ready(function(){
    var loc = {lat:0,long:0};
    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
    }else{
    alert("Geolocation is not supported by this browser.");
    }
    console.log(loc);
    function showPosition(position){ 
    loc.lat=position.coords.latitude;
    loc.long=position.coords.longitude;
    var geocoder = new google.maps.Geocoder();
    var latLng = new google.maps.LatLng(loc.lat, loc.long);
    console.log(latLng);
    if (geocoder) {
        geocoder.geocode({ 'latLng': latLng}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          console.log(results[0].formatted_address); 
          alert('Address:'+results[0].formatted_address);
        }else {
            console.log("Geocoding failed: " + status);
        }
       }); //geocoder.geocode()
    } 
    }
    var latLong = new google.maps.LatLng(loc.lat, loc.long);
    var mapOptions = {
    center: latLong,
    useCurrentLocation : true,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapMsg = new google.maps.Map(document.getElementById("local_map"), mapOptions);
    google.maps.event.addDomListener(window, 'load');
    var markerOptions = new google.maps.Marker({
    clickable: true,
    flat: true,
    map: mapMsg,
    position: latLong,
    title: "You are here",
    visible:true,
    icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    });
});


这是Firefox控制台的屏幕截图,显示了正确的位置地址和lat long。

Firefox Console

控制台中的前两行是坐标,第三行是地理编码位置 请告诉我我哪里错了。我知道这将是一个愚蠢的错误,但我是新手。

此致

2 个答案:

答案 0 :(得分:1)

这是因为navigator.geolocation.getCurrentPosition是异步的。 因此,当您执行var latLong = new google.maps.LatLng(loc.lat, loc.long); loc.lat仍为'0'时,loc.long也是如此。

因此,您需要在函数showPosition中包含do行。

答案 1 :(得分:1)

您永远不会从地理编码器结果中获取位置,或设置标记 - 并且执行顺序是颠倒的(但不会失败)

请改为:

...
if (status == google.maps.GeocoderStatus.OK) {
  var markerOptions = new google.maps.Marker({
     clickable: true,
     flat: true,
     map: mapMsg,
     position: results[0].geometry.location,
     title: "You are here",
     visible:true,
     icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
   });
   var marker = new google.maps.Marker(markerOptions);
   mapMsg.setCenter(results[0].geometry.location);
   } else {
     console.log("Geocoding failed: " + status);
   }
   ...

以下是您的代码http://jsfiddle.net/zqeCX/的某种清洁/工作版本 但你应该考虑使用谷歌地图示例中的一个作为起点,以确保执行流程正确。