javascript - jQuery 或 Javascript 助手从谷歌地图获取 LatLng

Question

我需要让用户输入 map 任意点的地理编码 (LatLng)，以便存储在数据库中供以后使用。

在承担责任之前，您是否知道 jQuery 插件或 javascript 可以:

• 弹出 Google map
• 用户在 map 上导航
• 用户点击了一个点
• 它将选定的 LatLng 放在文本框中
• 关闭弹窗

(或类似的东西)

Answer 1

我强烈建议使用 v3 api，因为它作为插件同样易于使用和快速学习。此外，插件不会为您提供弹出窗口。

所以这是我的解决方案:

<强>1。导入

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

<强>2。在您的 html 中放置一个 div
<div class="mapClass" id="mapDiv" ></div>

<强>3。 Initialize your map

var map;

var greece = new google.maps.LatLng(38.822590,24.653320);

//Map options
var mapOptions = {
    zoom: 6,
    center: greece,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Make a new map
map = new google.maps.Map(document.getElementById("mapDiv"),mapOptions);

瞧，你得到了你的 map 和导航控件

<强>4。 Bind onclick event google.maps.event.addListener(map, "click",yourFunction);

并实现您的功能以从点击获取坐标并填充一些文本字段或其他内容加上 add a marker

function getCoordinates(event){
  if (event.latLng) {
       var marker;
       //Fill your textfields
       document.getElementById('yourLngTextfield').value=event.latLng.lng();
       document.getElementById('yourLatTextfield').value=event.latLng.lat();

       //Remove any previously added marker and add a marker to that spot
       if(marker!=null){
            marker.setMap(null);
       }

       var latlng = event.latLng;
       marker = new google.maps.Marker({
             position: latlng
             map: map
        });
  }
}

就是这样。不过还没有测试。

现在，如果您想在弹出窗口中添加所有这些，请使用 colorbox

如果您仍想使用插件，请检查 here

干杯