Question

我一直在尝试用jquery mobile实现html5地理定位。

这是我在html文档中完美运行的原始代码，但只是不能使用jquery mobile。

    <script>
    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.842535, lng: -87.697091},
    zoom: 16,
    disableDefaultUI: true
    });

    var ctaLayer = new google.maps.KmlLayer({
    url: 'http://dawebmaster.com/apps/dawebmastersMAP.kml',
    suppressInfoWindows: false,
    map: map,
    preserveViewport: true
    });

    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
    };

    infoWindow.setPosition(pos);
    infoWindow.setContent('You\'re Here.');
    map.setCenter(pos);
    }, function() {
    handleLocationError(true, infoWindow, map.getCenter());
    });
    } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
    }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
    }

    </script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

好吧所以下面这段代码与jquery mobile完全一致，我也想要它，但每当我尝试添加htmll5地理定位时它都不起作用。

    <script>
    $(document).on('pageshow', '#page2',function(e,data){   

        $('#content').height(getRealContentHeight());

       // This is the minimum zoom level that we'll allow
       var minZoomLevel = 12;

       var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 16,
          center: {lat: 41.842535, lng: -87.697091},
          disableDefaultUI: true
       });
        var ctaLayer = new google.maps.KmlLayer({
        url: 'http://dawebmaster.com/apps/dawebmastersMAP.kml',
        suppressInfoWindows: false,
        map: map,
        preserveViewport: true
       });

       var infoWindow = new google.maps.InfoWindow({map: map});
    });
    function getRealContentHeight() {
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        } 
        return content_height;
       }
      </script> 
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

我正在尝试将html5地理位置代码添加到第二个。我在最后一个函数之前添加它，之后它却没有用。

我尝试在第二段代码中将其添加到不同的位置，但没有任何工作......

以下是我要添加的完整代码......我只需要有人指出我正确的方向。这令人沮丧.....

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
    };

   infoWindow.setPosition(pos);
   infoWindow.setContent('You\'re Here.');
   map.setCenter(pos);
   }, function() {
   handleLocationError(true, infoWindow, map.getCenter());
   });
   } else {
   // Browser doesn't support Geolocation
   handleLocationError(false, infoWindow, map.getCenter());
   }
   }

   function handleLocationError(browserHasGeolocation, infoWindow, pos) {
   infoWindow.setPosition(pos);
   infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
   }

使用jquery mobile进行html5地理定位

0 个答案: