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

如何将返回值从showPostion function传递到initialize .此脚本的目标是显示具有用户当前位置的Google地图。

请参阅以下脚本中的评论：

 <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 类并在此对象上调用 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()),
          zoom: 13,
          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, 'load', getLocation() );

我不知道

最好的方法，但你可以解析 2 个位置

function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;
          return latitude.concat(';',longitude);
      }

比你拆分你的位置得到经度和纬度

var position = showPosition(position);
position = position.split(';');
// position[0] -> latitude
// position[1] -> longitude

相关内容

最新更新

热门标签：