如何在谷歌地圖上點擊更改經緯度和緯度

我正在使用此代碼獲取谷歌地圖。如何在谷歌地圖上點擊更改經緯度和緯度

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(52.000,17.1100); 
    var myOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
    }); 

    var infoWindow = new google.maps.InfoWindow({ 
    position: latlng, 
    content: '<b>Theater Address:</b><br> <?php echo $row['address']; ?>' 
    }); 
    infoWindow.open(map); 
    } 
</script>

而我使用這個html表單代碼輸入緯度和經度，我有一個提交按鈕。

<form method="post" autocomplete="off"> 
     <p> 
      <b>lat</b> <label>:</label> 
      <input type="text" name="lat" id="lat" /> 
      <b>lon</b> <label>:</label> 
      <input type="text" name="lon" id="lon" /> 
     </p> 
     <input type="submit" value="Show location" /> 
    </form>

地圖上有一些其他的緯度和經度。但我也應該改變它的緯度和經度，當我輸入經緯度和lon.how我可以做到這一點誰能幫助我後，點擊提交？

在此先感謝.. :)

來源

2012-09-27 Mud Hut

我已經把一些瓦爾出初始化功能，使它們可用於單擊按鈕。我向您的提交按鈕添加了一個ID，其中包括jquery。這個工作對我來說：

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     #map_canvas { height: 400px; width: 500px } 
    </style> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    <form method="post" autocomplete="off"> 
     <p> 
     <b>lat</b> <label>:</label> 
     <input type="text" name="lat" id="lat" /> 
     <b>lon</b> <label>:</label> 
     <input type="text" name="lon" id="lon" /> 
     </p> 
     <input type="submit" value="Show location" id="submit"/> 
    </form> 
    <script src="jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript"> 
     var latlng = new google.maps.LatLng(52.000,17.1100); 
     var myOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     function initialize() { 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
     }); 

     var infoWindow = new google.maps.InfoWindow({ 
      position: latlng, 
      content: '<b>Theater Address:</b>' 
     }); 
     infoWindow.open(map); 
     } 

     initialize(); 

     $("#submit").on("click", function(evt) { 
     evt.preventDefault(); 
     var lat = $("input#lat").val(); 
     var lon = $("input#lon").val(); 
     latlng = new google.maps.LatLng(lat,lon) 
     map.setCenter(latlng) 
    }) 
    </script> 
</body>

來源

2012-09-27 07:37:58 zemirco

您可以通過多種方式做到這一點。

我可以建議ü方式如下：

創建另一種方法來顯示地圖：

function re_create_map() { 
    var latlng = new google.maps.LatLng(document.getElementById("lat").value,document.getElementById("lon").value); 
       map.setCenter(latlng);   
} 

    <input type="button" onclick="re_create_map()" value="Show location" />

注*：沒有必要採取輸入類型=「提交「因爲我們不需要提交這個表格，所以我們只能在客戶端完成這件事情。

或者你可以嘗試一些其他的JavaScript技巧來實現相同的目標。

來源

2012-09-27 07:44:49 gprathour

入住這fiddle

在下面的代碼替換爲event你想dragend。在你的情況下'點擊'

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("defaultLatitude").value = event.latLng.lat(); 
    document.getElementById("defaultLongitude").value = event.latLng.lng(); 
});

來源

2014-11-29 13:00:22

如何在谷歌地圖上點擊更改經緯度和緯度

回答

相關問題