2015-11-16 2 views
0

Ниже приведен код карты. Я хотел бы знать, как я могу получить текущее местоположение с карты? У кого-нибудь есть идеи? Заранее спасибо.Как получить текущее местоположение отсюда здесь?

<!doctype html> 
    <html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
     <link rel="stylesheet" type="text/css" 
     href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" /> 
     <script type="text/javascript" charset="UTF-8" 
     src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> 
     <script type="text/javascript" charset="UTF-8" 
     src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> 
     <script type="text/javascript" charset="UTF-8" 
     src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> 
     <script type="text/javascript" charset="UTF-8" 
     src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> 

    </head> 
    <body> 

     <div id="map" style="width: 100%; height: 700px; background: #ccc" /> 


     <script type="text/javascript" charset="UTF-8" > 

    /** 
    * Boilerplate map initialization code starts below: 
    */ 

    function showMap(position) { 
      // Show a map centered at (position.coords.latitude, position.coords.longitude). 
     } 

     navigator.geolocation.getCurrentPosition(showMap); 

    //Step 1: initialize communication with the platform 
    var platform = new H.service.Platform({ 
     app_id: 'DemoAppId01082013GAL', 
     app_code: 'AJKnXv84fjrb0KIHawS0Tg', 
     useCIT: true, 
     useHTTPS: true 
    }); 
    var defaultLayers = platform.createDefaultLayers(); 

    //Step 2: initialize a map - this map is centered over Eindhoven 
    var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {center: {lat: 51.4484160, lng: 5.4916750}, zoom: 13}) ; 

    //Step 3: make the map interactive 
    // MapEvents enables the event system 
    // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 

    // Create the default UI components 
    var ui = H.ui.UI.createDefault(map, defaultLayers); 

    function addCircleToMap(map){ 

    // Color of the dot, later on change this into interactive wheel 
    var dotcolor = 'green'; 

     map.addObject(new H.map.Circle(
     // The central point of the circle 
     {lat: 51.4484160, lng: 5.4916750}, 
     // The radius of the circle in meters 
     100, 
     { 
      style: { 
      strokeColor: 'white', // Color of the perimeter 
      lineWidth: 2, 
      fillColor: dotcolor // Color of the circle 
      } 
     } 
    )); 
    } 

    // Now use the map as required... 
    addCircleToMap(map); 

     </script> 
    </body> 
    </html> 

Ниже приведен код карты. Я хотел бы знать, как я могу получить текущее местоположение с карты? У кого-нибудь есть идеи? Заранее спасибо.

+0

Так что вы хотите увидеть ваше собственное местоположение отображается на карте? –

+0

да! это именно то, что мы хотим .... – matlabqq

ответ

0

Я не уверен, когда вы используете api.here.com. Возможно, вы можете использовать google.maps.Geocoder, как показано ниже. Это установит lat и lng, равные вашей позиции, если она включается в вашем браузере причины.

libary:

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

Js:

var geocoder; 
    geocoder = new google.maps.Geocoder(); 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(successFunction, errorFunction); 
    } 
    //Get the latitude and the longitude; 
    function successFunction(position) { 
     var lat = position.coords.latitude; 
     var lng = position.coords.longitude; 
     codeLatLng(lat, lng) 
    } 
    function errorFunction() { 
     alert("Geocoder failed"); 
    } 
    function codeLatLng(lat, lng) { 
     var latlng = new google.maps.LatLng(lat, lng); 
     geocoder.geocode({ 
      'latLng': latlng 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       console.log(results) 
       if (results[1]) { 
        alert("Found you! at Latitude: " +lat + " and Longitude: " +lng); 
       } else { 
        alert("No results found"); 
       } 
      } else { 
       alert("Geocoder failed due to: " + status); 
      } 
     }); 
    } 
0
<!DOCTYPE html> 
<html> 
<body> 

<p id="demo">Click the button to get your position.</p> 

<button onclick="getLocation()">Try It</button> 

<div id="mapholder"></div> 

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script> 
var x = document.getElementById("demo"); 
function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition, showError); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 

function showPosition(position) { 
    lat = position.coords.latitude; 
    lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat, lon) 
    mapholder = document.getElementById('mapholder') 
    mapholder.style.height = '250px'; 
    mapholder.style.width = '500px'; 

    var myOptions = { 
    center:latlon,zoom:14, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    mapTypeControl:false, 
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
    } 

    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 
} 

function showError(error) { 
    switch(error.code) { 
     case error.PERMISSION_DENIED: 
      x.innerHTML = "User denied the request for Geolocation." 
      break; 
     case error.POSITION_UNAVAILABLE: 
      x.innerHTML = "Location information is unavailable." 
      break; 
     case error.TIMEOUT: 
      x.innerHTML = "The request to get user location timed out." 
      break; 
     case error.UNKNOWN_ERROR: 
      x.innerHTML = "An unknown error occurred." 
      break; 
    } 
} 
</script> 

</body> 
</html>