jQuery或Javascript助手从Google Maps获取LatLng [英] jQuery or Javascript helper to get a LatLng from Google Maps

问题描述

我需要让用户输入地图任意点的地理编码（LatLng），以便存储在数据库中，然后再使用。

在拥抱您知道一个jQuery插件或javascript：

• 弹出Google Map


• 用户浏览地图


• 用户点击一个地点


• 它将选定的LatLng放置在文本框中


• 关闭弹出窗口

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

/ p>

所以这里是我的解决方案：

1。导入

< script type =text / javascriptsrc =http://maps.google.com/maps / api / js？sensor = false>< / script>

在div中放置一个div

< div class =mapClassid =mapDiv>< / div>

3。 初始化您的地图

var map;

var greece = new google.maps.LatLng（38.822590,24.653320）;

  //地图选项
 var mapOptions = {
 zoom：6，
 center：greece，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 //制作一张新地图
 map = new google.maps.Map（document.getElementById（mapDiv），mapOptions）; 
  

地图和导航控件

4. 绑定onclick事件
google.maps.event.addListener（map，click ，yourFunction）;

实现你的函数从点击中获取坐标并填充一些文本字段或者加上添加标记

 函数getCoordinates（event）{
 if（event.latLng）{
 var marker; 
 //填充文本字段
 document.getElementById（'yourLngTextfield'）。value = event.latLng.lng（）; 
 document.getElementById（'yourLatTextfield'）。value = event.latLng.lat（）; 
 
 //删除以前添加的标记并将标记添加到该标记
 if（marker！= null）{
 marker.setMap（null）; 
} 
 
 var latlng = event.latLng; 
 marker = new google.maps.Marker（{
 position：latlng 
 map：map 
}）; 
 
 
 
 
 
 
 
就是这样，虽然没有经过测试， p> 
 
 
现在，如果您想要在弹出式菜单中添加所有内容，请使用 colorbox  
 
 
 
如果你仍然想使用插件检查 here   
 
 
干杯
 
I need to let the user input a geocode (LatLng ) of an arbitrary point of the map, for store in the DB and later use.

Before embracing the duty, Do you know a jQuery plug-in or javascript that:


Pop-ups a Google map
The user navigate the map
The user click on a point
It places the selected LatLng in a textbox
Close the pop-up 


(or something along the lines)
解决方案
I strongly recommend to use the v3 api since it is equally easy to use and fast to learn as a plugin.Also a plugin won't offer you the popup.

So here is my solution:

1. Import

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

2. Place a div in your html

    <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);

  

Voila,you get your map and the navigation controls

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

And implement your function to get the coords from the click and fill some textfields or      something plus 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
        });
  }
}
That's it.It is not tested though.

Now if you want to add all this in popup use colorbox

If you still want to use plugins check here

Cheers

                        
这篇关于jQuery或Javascript助手从Google Maps获取LatLng的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！