谷歌地图API v3不适用于移动浏览器或PhoneGap

Google Maps API v3 not working in mobile browsers or PhoneGap

本文关键字：浏览器 PhoneGap 移动 适用于 API v3 不适用 谷歌地图      更新时间：2023-09-26

Google Maps API v3不适用于移动浏览器或PhoneGap，即使我允许所有外部主机

无论是否使用apikey，我都尝试过。

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

当我导航到有地图的页面时，我得到消息"Error Loading map"，这意味着map是null

我怀疑谷歌检测到我正在使用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;
    }
}

这段代码怎么样？我根据你的代码创建了代码。我试过我的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);
相关文章：