javascript - Google Maps API v3 无法在移动浏览器或 PhoneGap 中运行

Question

即使我允许所有外部主机，Google Maps API v3 也无法在移动浏览器或 PhoneGap 中运行

我尝试过使用或不使用 apikey。

当设备准备就绪(在 iDevice(iOS) 上)或加载页面(在计算机上)时，会调用 loadMapScript() 方法

当我导航到包含 map 的页面时，我收到消息“加载 map 时出错”，这意味着map为null

我怀疑 Google 正在检测到我正在使用 iOS 设备并限制我使用他们的 API，但我没有证据证明这一点。

附注这在所有浏览器上都可以正常工作! 附:我在 iPad 版 Safari 中尝试过此操作，但不起作用!但可以在电脑上运行! 附:刚刚检查过它不适用于任何移动浏览器或phonegap，但适用于所有桌面浏览器:/

如有任何帮助，我们将不胜感激

代码:

function loadMapScript() {
    if($("#googleMaps").length == 0) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.id = "googleMaps"
        script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap&key=HIDDEN";
        document.body.appendChild(script);
    } else console.log("Error, googleMaps already loaded");
}



function initializeMap(mapOptions) {
    console.log("Init Maps");
    var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
    if(!mapOptions)
        mapOptions = {
            center: myLatlng,
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    if(!map)
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
    else {
        map.setOptions(mapOptions);
    }
    updateCurrentLocationMarker();
}



function updateCurrentLocationMarker() {
    if(!map) {
        return;
    }
    var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
        currentLocation.coords.longitude);
    if(currentLocationMarker) {
        currentLocationMarker.setMap(null);
    } else {
        currentLocationMarker = new google.maps.Marker({
            position: myLatlng,
            animation: google.maps.Animation.DROP,
            title:"You!"
        });
        currentLocationMarker.setMap(map);
    }
}

function onMapsShow() {
    if(!map) {
        showToastNow("Error Loading map");
        return;
    }
}

Answer 1

这段代码怎么样？我根据您的代码创建了代码。 我尝试了 iPad，效果很好。

var map, mapOptions, currentLocation, currentLocationMarker;
function loadMapScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.id = "googleMaps"
  script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap";
  document.body.appendChild(script);
}

function initializeMap(mapOptions) {
  var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
  var mapOptions = {
    center : myLatlng,
    zoom : 18,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  updateCurrentLocationMarker();
}

function updateCurrentLocationMarker() {
  var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);

  if (currentLocationMarker) {
    currentLocationMarker.setMap(null);
  } else {
    currentLocationMarker = new google.maps.Marker({
      position : myLatlng,
      animation : google.maps.Animation.DROP,
      title : "You!",
      map : map
    });
  }
}

function onSuccess(position) {
  currentLocation = position;
  if (!map) {
    loadMapScript();
  }
}

function onError(error) {
  alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}

function onDeviceReady() {
  navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

document.addEventListener("deviceready", onDeviceReady, false);