安卓浏览器中带标记的Google Map无法显示问题求助
2026-5-20
看起来你在安卓浏览器上遇到了Google Maps应用的加载问题，我帮你梳理了几个核心问题，并且给出了修复方案：
核心问题分析
- Google Maps API 加载时机错误：你的代码在
$(document).ready里直接调用google.maps相关对象，但如果Maps API还没加载完成，会抛出google is not defined的错误，导致整个脚本终止——这就是连Geolocation提示都弹不出来的主要原因，安卓浏览器的JS加载顺序限制比PC更严格，这个问题会被放大。 - Geolocation 缺少错误处理：
getCurrentPosition需要成功、失败两个回调参数，你只传了成功回调。当用户拒绝定位权限、定位超时或失败时，代码会直接卡住，既不会执行成功逻辑，也不会触发else分支的提示。 - HTTPS 强制要求：安卓Chrome从较新版本开始，只有HTTPS网站才能使用Geolocation API，如果你的网站是HTTP协议，定位功能会直接失效，甚至引发脚本异常。
修复后的完整代码
<!DOCTYPE html> <html lang="en"> <head> <?php include"head.php"; ?> <title>Find Latitude and Longitude of Draggable Marker Google Maps API</title> </head> <body> <div id="infomap" style="width:300px; height:auto;overflow:auto;float:left;margin:10px;"> <label for="latitude"> Lat: </label> <input id="txtLat" class="form-control" type="text" style="color:red" value="" /> <label for="longitude"> Long: </label> <input id="txtLng" class="form-control" type="text" style="color:red" value="" /> <label for="Place"> Place Name: </label> <input id="txtPlc" class="form-control" type="text" value="" /> <label for="info"> Info: </label> <textarea id="txtInf" class="form-control" type="text" ></textarea><br /> <button id="save" class="form-control">Save</button> <br /> <br /> </div> <div id="dvMap" style="width: auto; height: 500px; margin:10px;"></div> <script src="../vendor/jquery/jquery.min.js"></script> <!-- 修改API加载方式，添加callback确保API加载完成后再执行初始化 --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script> <script type="text/javascript"> // 初始化逻辑由Maps API的callback触发，避免提前调用未加载的API function initMap() { if (!navigator.geolocation) { alert('Geo Location feature is not supported in this browser.'); // 不支持定位时加载默认坐标地图，避免页面空白 loadMapWithDefaultCoords(); return; } // 完善定位的成功/失败回调，添加超时等配置 navigator.geolocation.getCurrentPosition( function (p) { var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); var lattt = LatLng.lat().toFixed(8); var langgg = LatLng.lng().toFixed(8); $("#txtLat").val(lattt); $("#txtLng").val(langgg); loadMap(LatLng); }, function(error) { // 处理各种定位失败场景 switch(error.code) { case error.PERMISSION_DENIED: alert('User denied the request for Geolocation.'); break; case error.POSITION_UNAVAILABLE: alert('Location information is unavailable.'); break; case error.TIMEOUT: alert('The request to get user location timed out.'); break; case error.UNKNOWN_ERROR: alert('An unknown error occurred.'); break; } // 定位失败时加载默认坐标地图 loadMapWithDefaultCoords(); }, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 } ); } // 封装地图加载逻辑，复用代码 function loadMap(latLng) { var mapOptions = { center: latLng, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var marker = new google.maps.Marker({ position: latLng, map: map, draggable: true }); google.maps.event.addListener(marker, 'dragend', function (evt) { var latt = evt.latLng.lat().toFixed(8); var langg = evt.latLng.lng().toFixed(8); $("#txtLat").val(latt); $("#txtLng").val(langg); map.panTo(evt.latLng); }); google.maps.event.addListener(marker, "click", function (e) { var infoWindow = new google.maps.InfoWindow(); infoWindow.setContent(marker.title || 'Marker'); infoWindow.open(map, marker); }); map.setCenter(marker.position); marker.setMap(map); } // 加载默认坐标（示例为纽约），保证页面始终有地图显示 function loadMapWithDefaultCoords() { var defaultLatLng = new google.maps.LatLng(40.7128, -74.0060); $("#txtLat").val(defaultLatLng.lat().toFixed(8)); $("#txtLng").val(defaultLatLng.lng().toFixed(8)); loadMap(defaultLatLng); } $(document).ready(function(){ $('#save').click(function(sp){ //AJAX to save date to database }); }); </script> </body> </html>
关键修复说明
- API加载时机控制：给Maps API添加
callback=initMap参数，确保只有API完全加载完成后才执行初始化逻辑，彻底解决google is not defined的错误。 - 完善异常处理：添加定位失败的回调函数，覆盖用户拒绝授权、超时等所有异常场景，同时在定位失败时加载默认坐标的地图，避免页面空白。
- 代码结构优化：把地图加载逻辑封装成独立函数，减少重复代码，让维护更简单。
- HTTPS验证：确保你的网站使用HTTPS协议，这是安卓Chrome允许调用Geolocation API的必要条件。
内容的提问来源于stack exchange，提问作者Gumilar
