Google maps jquery mobile中的地理定位功能_Google Maps_Jquery Mobile

Google maps jquery mobile中的地理定位功能

google-maps jquery-mobile

Google maps jquery mobile中的地理定位功能,google-maps,jquery-mobile,Google Maps,Jquery Mobile,我有这个html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <meta name="description" content="" /> <meta name="author" content="Salvatore Mazzarino" /> <m

我有这个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>

  <meta name="description" content="" />
  <meta name="author" content="Salvatore Mazzarino" />

  <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <!-- jquery mobile scripts -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-   1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

  <!-- my own style sheet -->
  <link rel="stylesheet" href="./assets/css/style.css" type="text/css" />

  <!-- google maps api script -->
  <script type="text/javascript" src="./includes/js_map.js"></script>
  <script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>

<body>

    <div data-role = "page" id = "map-page">
        <div data-role = "header">
            <h1>Your position</h1>
        </div>

        <div data-role = "content" id = "map-canvas">
            <!-- here the map -->
        </div>
    </div>

 </body>
</html>

我正在尝试获取我的位置。在html页面中，应该会显示mas，但默认地图上没有显示任何内容。为什么？有什么想法吗？

如果没有看到您的实时代码，就很难看出是否有任何CSS可能会导致显示问题。但是，至少有两件事需要解决：

您对Google Maps API的调用需要移动到您自己的JS文件（位于文档头部）上方

您的URL中有一个引用Maps API JS文件的错误。更改为：

致：

我能让地图加载并在地图中间显示一个标记。

     $( "#map-page" ).live( "pageinit", function() 
                               {

// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);

if ( navigator.geolocation ) 
{

    function success(pos) 
    {

        // Location found, show coordinates on map
        drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    }

    function fail() 
    {

        drawMap(defaultLatLng); // Show default map
    }

    // Find users current position
    navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});

 } 
 else 
 {
    drawMap(defaultLatLng); // No geolocation support
 }

function drawMap(latlng) {

        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(
        document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Greetings!"
        });
}
});