Question

以下是此处地图的代码。我想知道如何从地图中获取当前位置？有人有想法吗？提前谢谢。

<!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>

以下是此处地图的代码。我想知道如何从地图中获取当前位置？有人有想法吗？提前谢谢。

Answer 1

我不确定您何时使用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);
            }
        });
    }

Answer 2

<!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>

如何从此地图中获取当前位置？

2 个答案: