从谷歌地图中的纬度和经度获取位置地址

2024-03-15

我想在点击谷歌地图并获取纬度和经度后从他们那里获取位置并将其(地址)放入字段中input#searchTextField。我该怎么办?

我尝试过,但不适合我:

DEMO: http://jsfiddle.net/DXkZJ/ http://jsfiddle.net/DXkZJ/

<input id="searchTextField" type="text" size="50" style="text-align:    left;width:357px;direction: ltr;">
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>



 $(function () {
     var lat = 44.88623409320778,
         lng = -87.86480712897173,
         latlng = new google.maps.LatLng(lat, lng),
         image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

     //zoomControl: true,
     //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,

     var mapOptions = {
         center: new google.maps.LatLng(lat, lng),
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         panControl: true,
         panControlOptions: {
             position: google.maps.ControlPosition.TOP_RIGHT
         },
         zoomControl: true,
         zoomControlOptions: {
             style: google.maps.ZoomControlStyle.LARGE,
             position: google.maps.ControlPosition.TOP_left
         }
     },
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
         marker = new google.maps.Marker({
             position: latlng,
             map: map,
             icon: image
         });

     var input = document.getElementById('searchTextField');
     var autocomplete = new google.maps.places.Autocomplete(input, {
         types: ["geocode"]
     });

     autocomplete.bindTo('bounds', map);
     var infowindow = new google.maps.InfoWindow();

     google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
         infowindow.close();
         var place = autocomplete.getPlace();
         if (place.geometry.viewport) {
             map.fitBounds(place.geometry.viewport);
         } else {
             map.setCenter(place.geometry.location);
             map.setZoom(17);
         }

         moveMarker(place.name, place.geometry.location);
         alert(place.name);
         $('.MapLat').val(place.geometry.location.lat());
         $('.MapLon').val(place.geometry.location.lng());
     });
     google.maps.event.addListener(map, 'click', function (event) {
         $('.MapLat').val(event.latLng.lat());
         $('.MapLon').val(event.latLng.lng());
         alert(event.latLng.place.name)
     });
     $("#searchTextField").focusin(function () {
         $(document).keypress(function (e) {
             if (e.which == 13) {
                 return false;
                 infowindow.close();
                 var firstResult = $(".pac-container .pac-item:first").text();
                 var geocoder = new google.maps.Geocoder();
                 geocoder.geocode({
                     "address": firstResult
                 }, function (results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                         var lat = results[0].geometry.location.lat(),
                             lng = results[0].geometry.location.lng(),
                             placeName = results[0].address_components[0].long_name,
                             latlng = new google.maps.LatLng(lat, lng);

                         moveMarker(placeName, latlng);
                         $("input").val(firstResult);
                         alert(firstResult)
                     }
                 });
             }
         });
     });

     function moveMarker(placeName, latlng) {
         marker.setIcon(image);
         marker.setPosition(latlng);
         infowindow.setContent(placeName);
         //infowindow.open(map, marker);
     }
 });​

好的,首先您需要反向地理编码,而不是常规地理编码,因为您是从纬度/经度到地址,而不是相反(请参阅参考 https://developers.google.com/maps/documentation/javascript/geocoding?hl=en#ReverseGeocoding)。其次,你的主要听众永远不会做任何事情,因为它几乎立即表明return false;在这种情况下你可能想要event.stopPropogation()。此外,谷歌地图将在 DOM 树中更深层拦截您的鼠标点击document,所以无论如何,该事件永远不会被如此高度关注。

所以我所做的就是将您的地理编码更改为反向地理编码,并将文档侦听器中的代码移动到谷歌侦听器中。如果您想保留添加到焦点上的侦听器的行为,您可以简单地在地图对象上创建一个新的侦听器。这里有一个正在运行的 jsfiddle 演示了这些变化 http://jsfiddle.net/DXkZJ/1/,希望这有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从谷歌地图中的纬度和经度获取位置地址 的相关文章

随机推荐

  • Spring-MVC:什么是“上下文”和“命名空间”?

    From XmlWeb应用程序上下文 http javasourcecode org html open source spring spring 3 0 4 org springframework web context support
  • Python中字符串中重复字符的正则表达式

    我是正则表达式的新手 我有一个正则表达式 可以从字符串中删除重复字符 gt gt gt self repeat regexp re compile r w w 2 w gt gt gt self repl r 1 2 3 上面两行代码去掉了
  • 将代理附加到现有对象?

    我的计划是编写一个基于注释的缓存框架 用于缓存方法的返回值 当第一次使用特定参数调用方法时 缓存应该存储方法的返回值 当使用相同的参数第二次调用相同的方法时 该方法应该从缓存中返回先前计算的结果 并且不再执行其代码 我的注释如下所示 Cac
  • 如何在iPhone 6.0模拟器中添加视频? [复制]

    这个问题在这里已经有答案了 我在保存视频时遇到问题iPhone模拟器 我尝试过几种选择 例如去图书馆 但看起来不太酷 我想添加它们 以便以后可以在我的应用程序中选择它们 1 将视频文件拖放到模拟器中2 按选项卡栏上的操作按钮3 保存到相机胶
  • 在 OSX Ventura 上运行“__rvm_make -j8”RVM 安装时出错

    因为现在已经过去几个月了 我想我终于可以来这里问问了 我根本无法在 MacOS Ventura 上使用 RVM 安装任何版本的 Ruby 这似乎与其他人遇到的问题无关 我已经尝试了所有其他解决方案 但这似乎与 OpenSSL 或类似的东西无
  • 每个开发人员对 C# 类库的配置设置不同

    我们是一个小团队 致力于 ASP NET Web 项目以及服务 这两个项目都依赖于共享类库 我们希望每个开发人员的类库设置都不同 以及稍后的生产 设置中包含敏感信息 例如密码和主机名 我们应该如何分配这些设置 除非我错了 否则 web co
  • ReaderT静态环境

    宣言ReaderTmonad 转换器 为给定的 monad 添加静态环境 向给定的 monad 添加静态环境意味着什么 有人认为这是另一个问题的重复 我相信这个问题是独特的 因为我问的是静态环境意味着什么 而且我的问题与 ReaderT 有
  • 如何从内核读取性能计数器?

    我一直在用户空间使用Linux perf工具 我想编写代码 在每次执行上下文切换时读取线程的性能计数器 所需步骤是 1 获得一种读取性能计数器寄存器的机制 2 每次上下文切换后从调度程序调用步骤 1 我陷入了步骤 1 因为我无法弄清楚要调用
  • 仅在值之间使用分隔符打印

    我的代码输出有一个小问题 并且一直在搜索与此相同的主题 但我没有找到任何主题 while true System out print Enter a positive integer n sc nextInt System out prin
  • WinRT Chrome 应用程序如何在不触发操作系统的“打印”对话框的情况下进行打印?

    WinRT Chrome 应用程序如何在不触发操作系统的 打印 对话框的情况下进行打印 从我在其他地方看到的情况来看 每个 WinRT 应用程序都必须通过 Windows 打印对话框进行打印 但是 当您从 Chrome Metro 应用打印
  • Delphi 10.3 中使用 HTTPRIO 进行基本身份验证

    发生了变化HTTPRIO HTTPWebNode OnBeforePostDelphi 10 3 中的事件 在 Delphi 10 3 之前 事件处理程序是这样定义的 并且运行良好 procedure TForm1 HTTPRIO1HTTP
  • 检查 pandas 中任何列的任何行中是否存在一个值?

    是否有任何函数可以检查 pandas 中任何列的任何行中是否存在某个值 例如 columnA columnB columnC john 3 True mike 1 False bob 0 False 在上面的数据框中 我想知道是否有任何名为
  • Portlet 在 Plone 中如何呈现/排序/布局?

    我正在尝试更改 Plone 站点中 portlet 的全局排序 我搜索了 Plone 源代码 但找不到实际迭代并呈现 portlet 的代码 例如 plone rightcolumn 和 plone leftcolumn 内容提供程序 该代
  • 如何在 Linux 中查找所有以 .rb 结尾的文件?

    我所在的目录包含更多目录 我可以使用什么命令来获取所有以 rb 你可以尝试 find type f name rb
  • 在 Laravel 中将会话从文件传输到数据库

    我已经积累了超过6000万个会话 这导致了文件描述符耗尽的情况 通过将会话传输到数据库解决了该问题 在 Laravel 5 6 上测试 为了这 准备桌子 https laravel com docs 8 x session database
  • 使用子查询中的多个值进行更新

    假设我有一张桌子 items 有一个名为的整数列priority 我正在尝试从另一个表更新它 另一个表是一个临时表 我已经在其中预先计算了所有适当的priority要应用的值 UPDATE items SET priority SELECT
  • 将 DateTimePicker 值设置为 null

    我正在开发一个 WinForms UI 有两个DateTimePicker控制 最初 我想将控件的值设置为 null 直到用户选择日期 如果用户没有选择日期 则会将 null 值传递给数据库 默认情况下 它采用当前日期 您能否提出一些建议或
  • 检测实时应用程序中死锁的方法

    在实时多线程应用程序中检测死锁的方法有哪些 如果我们发现存在死锁 是否有任何方法可以解决它 而无需关闭 重新启动应用程序 有两种流行的方法来检测死锁 一种是让线程设置检查点 例如 如果您有一个具有工作循环的线程 您可以在开始工作时设置一个计
  • Scala 脚本无法在 Ubuntu 上运行

    我有一个以前可以工作的 Scala 脚本 当我尝试在新 PC 上运行它时 编译失败 所以我做了简单的脚本来测试 bin sh exec scala J Xmx2g 0 println test 尝试运行它我得到 test scala err
  • 从谷歌地图中的纬度和经度获取位置地址

    我想在点击谷歌地图并获取纬度和经度后从他们那里获取位置并将其 地址 放入字段中input searchTextField 我该怎么办 我尝试过 但不适合我 DEMO http jsfiddle net DXkZJ http jsfiddle