Cách khởi tạo API Google Maps với vị trí địa lý (vị trí hiện tại của người dùng) với định vị địa lý HTML5 javascript

Cách chuyển giá trị trả lại từ showPostion function vào initialize. Mục tiêu của tập lệnh này là hiển thị GoogleMap với vị trí hiện tại của người dùng.Cách khởi tạo API Google Maps với vị trí địa lý (vị trí hiện tại của người dùng) với định vị địa lý HTML5 javascript

Xin vui lòng, xem các ý kiến trong kịch bản dưới đây:

<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"/>

Nguồn

2013-10-18 Anonymous

Giải pháp là sử dụng google.maps.LatLng class và gọi lat() và lng() phương pháp trên đối tượng này như sau:

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());

Nguồn

2013-10-21 19:28:53

Tôi không biết cách tốt nhất nhưng bạn có thể phân tích 2 vị trí

function showPosition(position) { 
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 

      return latitude.concat(';',longitude); 
     }

hơn bạn chia vị trí của bạn để có được những kinh độ và vĩ độ

var position = showPosition(position); 
position = position.split(';'); 

// position[0] -> latitude 
// position[1] -> longitude

Nguồn

2013-10-18 14:57:27 seb

Cách khởi tạo API Google Maps với vị trí địa lý (vị trí hiện tại của người dùng) với định vị địa lý HTML5 javascript

Trả lời

Các vấn đề liên quan