向谷歌地图传递纬度和经度.需要有人帮我修改代码

passing latitude and longitude to google maps. Need someone to help me correct my code

本文关键字：代码 修改 谷歌地图 纬度 经度      更新时间：2023-09-26

我尝试了以下方法来传递时间和长度到谷歌地图，以便我应该能够打开地图并在地图上找到我当前的位置。当我运行这段代码时，只显示Google地图符号而没有地图。

var lat= function latitu(){
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
     var element = '' +  position.coords.latitude + '' ;
}
// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + ''n' +
          'message: ' + error.message + ''n');
}
}
var lon = function longitu(){
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
     var element= '' +  position.coords.longitude + '' ;
}
// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + ''n' +
          'message: ' + error.message + ''n');
}
}
var map;
  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lat,lon ),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
  }
  function addMarkers() {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
      var latLng = new google.maps.LatLng(lat,lon);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

没有得到地图的原因是没有中心坐标。lat和lon变量不包含纬度和经度，它们包含用于获取坐标的函数的函数引用。因为函数从来没有被调用过，所以没有坐标。

这不能简单地通过调用函数来修复，因为函数不返回坐标，它们只是开始获取坐标的过程，并立即返回undefined的返回值。一旦成功回调被调用，坐标将被放入一个变量并被遗忘。

你应该首先获得坐标，当它们到达时，你可以开始设置地图。您当前的代码正在等待deviceready事件获取坐标(或者如果调用了这些函数，它将获得坐标)，并等待load事件设置地图。因为你不知道事件发生的时间，所以你可以在没有任何坐标之前设置地图。一旦坐标到达，调用设置地图的函数，在该函数中，您可以检查元素是否已加载，并在需要时使用load事件。

您有两个函数用于获取坐标，但您不需要分别获取经纬度。

下面的代码用于获取坐标，然后设置地图:

document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    initialize(lat, lon);
}
// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: ' + error.code + ''n' +
        'message: ' + error.message + ''n');
}
var map;
function initialize(lat, lon) {
    var mapDiv = document.getElementById('map-canvas');
    // check if the element exists
    if (mapDiv == null) {
        // if not, wait until it does
        google.maps.event.addDomListener(window, 'load', function(){
            initialize(lat, lon);
        });
    } else {
        map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(lat, lon),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
            addMarkers(lat, lon);
        });
    }
}
function addMarkers(lat, lon) {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    var latLng = new google.maps.LatLng(lat, lon);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
}

演示(不包含devideready事件):http://jsfiddle.net/Guffa/bTP2a/

相关文章：