使用Google Maps API在用戶當前位置設置標記？

我想在下面的腳本中的用戶當前位置設置一個標記。使用Google Maps API在用戶當前位置設置標記？

任何人都可以提供正確的代碼，實際上使用這個腳本？

我嘗試了一些Google文檔，沒有任何運氣。

THANKS

<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 

    var showPosition = function (position) { 
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    // Do whatever you want with userLatLng. 
    } 

    navigator.geolocation.getCurrentPosition(showPosition); 

    var directionDisplay; 
    var map; 


function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var copenhagen = new google.maps.LatLng(55.6771, 12.5704); 
    var myOptions = { 
     zoom:12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: copenhagen 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    } 


    var directionsService = new google.maps.DirectionsService(); 



    function calcRoute() { 
    var start = document.getElementById("start").value; 
    var end = document.getElementById("end").value; 
    var distanceInput = document.getElementById("distance"); 

    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      distanceInput.value = response.routes[0].legs[0].distance.value/1000; 
     } 
    }); 
    } 


    </script> 

    <title>Distance Calculator</title> 

    <style type="text/css"> 

      body { 
       font-family:Helvetica, Arial; 
      } 
      #map_canvas { 
       height: 50%; 
      } 
    </style> 
    </head> 
    <body> 

    <body onload="initialize()"> 
    <p>Enter your location and desired destination to calculate the distance</p> 
     <div> 
      <p> 
       <label for="start">Start: </label> 
       <input type="text" name="start" id="start" /><br /> 

       <label for="end">End:</label> 
       <input type="text" name="end" id="end" /><br /> 

       <input type="submit" value="Calculate Route" onclick="calcRoute()" /> 
      </p> 
      <p> 
       <label for="distance">Distance (km): </label> 
       <input type="text" name="distance" id="distance" readonly="true" /> 
      </p> 
     </div> 
     <div id="map_canvas"></div> 
    </body> 
</html>

來源

2012-10-16 user1749428

你可以使用HTML5中的地理位置功能，就像您嘗試過的那樣，但是您可以以確保您在地圖初始化之前不要求地理定位。因此，請將您的電話轉到navigator.geolocation.getCurrentPosition(showPosition);，直到您的initialize()功能結束。

此外，你需要創建一個新標記爲用戶的位置，並在地圖分配給該標記：

var showPosition = function (position) { 
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    // Do whatever you want with userLatLng. 
    var marker = new google.maps.Marker({ 
     position: userLatLng, 
     title: 'Your Location', 
     map: map 
    }); 
}

來源

2012-10-16 21:21:24 JasonWyatt

終於來了！非常感謝你！我不知道這是否太複雜，但可以使用當前位置作爲距離計算器的起點嗎？ – user1749428

當然，你會讓該位置成爲方向查詢的來源。附：如果此答案解決了您的問題，請將其選爲正確答案。 – JasonWyatt

你能告訴我在哪裏我必須改變腳本來做到這一點？ – user1749428

你可以從他們的IP地址用戶的位置（近似）。看看這些資源：

http://www.geoplugin.net/php.gp

http://isithackday.com/hacks/geo/yql-geo-library/

http://www.maxmind.com/app/geolitecity（可下載的數據庫）

一旦你從上面的網站之一的緯度和經度，

var location = new google.maps.LatLng(40.779502, -73.967857); 
marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    });

來源

2012-10-16 21:17:03

使用Google Maps API在用戶當前位置設置標記？

回答

相關問題