如何使用HTML5地理位置javascript初始化具有地理位置(用户的当前位置)的Google Maps API

如何将showPostion函数的返回值传递给initialize.此脚本的目标是向GoogleMap显示用户的当前位置.

请参阅以下脚本中的注释：

<head>
  <Meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
  </style>
  <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?<%= API_KEYS['google']['api_key'] %>&sensor=true">
  </script>

  <script type="text/javascript">

      function getLocation(){
          {
              if (navigator.geolocation)
              {
                  navigator.geolocation.getCurrentPosition(showPosition);
              }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
          }

      }

      function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;
          alert('latitude:' + latitude + 'longitude:' + longitude )

       //   This function is supposed to return the current latitude and longitude of user
       //   example: 48.1673341,17.0830998
      }


      function initialize() {

          var mapOptions = {


         //    How to pass the result from function showPosition to LatLng ?
         //    see the line below:                
         center: new google.maps.LatLng(48.1673341,17.0830998),zoom: 13,mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

      }

      google.maps.event.addDomListener(window,'load',initialize);

  $(document).ready(function(){     //  events before the windows loads
    getLocation();
  });


  </script>
</head>


<h3>Hello from Google maps </h3>


<div id="map-canvas"/>

解决方法

解决方法是使用 google.maps.LatLng class并在此对象上调用lat()和lng()方法,如下所示：

lat()   number  Returns the latitude in degrees.
lng()   number  Returns the longitude in degrees.

function getLocation(){

      {
          if (navigator.geolocation)

          {

              var options = {
                  enableHighAccuracy: true,timeout: 5000,maximumAge: 0
              };

              navigator.geolocation.getCurrentPosition( success,error,options);
          }

          else

          { x.innerHTML= "Geolocation is not supported by this browser."; }
      }

  }

  function error(e) {

  console.log("error code:" + e.code + 'message: ' + e.message );

  }

  function success(position) {
     var  lat  = position.coords.latitude;
     var  lng =  position.coords.longitude;

     var  myLocation =   new google.maps.LatLng(lat,lng);


     var mapOptions = {
           center: new google.maps.LatLng(myLocation.lat(),myLocation.lng()),mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);


      var marker = new google.maps.Marker({
          position: myLocation,map: map,title:"you are here"
      });

  }
  google.maps.event.addDomListener(window,getLocation() );

如何使用HTML5地理位置javascript初始化具有地理位置(用户的当前位置)的Google Maps API

解决方法

猜你在找的HTML5相关文章