Question

我试图首先使用navigator.geolocation获取当前的坐标，然后使用纬度和经度绘制地图。

但它没有显示地图，只是空白的白色屏幕。

<html>
<style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function getLocation()
{
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
        alert("Geolocation is not supported by this browser");
}
function showPosition(position)
{
    coord = {};
    coord.lat = position.coords.latitude;
    coord.longi = position.coords.longitude;
    initialize(coord);
}

function initialize(coord) {
  var map_canvas = document.getElementById('map_canvas');
  var map_options = {
    center: new google.maps.LatLng(coord.lat, coord.longi),
    zoom:8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', getLocation);


</script>
<body>
<div id="map_canvas" data-role="page"></div>
</body>
</html>

Answer 1

我打算发布此http://jsfiddle.net/n5jqpo9u/1/并说我的代码和我的作品中没有发现问题......

在我按下发布按钮之前，我意识到，您使用map-canvas而不是map_canvas作为您的CSS ...

-和_ :(

顺便说一句，当您使用chrome将其作为文件运行时，无法获取位置。此外，如果操作超时，或者您的应用没有位置权限，它也会显示白页。所以你应该像这样添加错误处理：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error

Google地图未在localhost上绘制地图

1 个答案: