使用地理编码将多个 addListener 事件添加到 Google 地图表单

2024-04-08

我创建了一个 Google 地图表单,允许用户在文本字段中输入地址并对条目进行地理编码。然后这会在地图上放置一个标记。这工作正常,但我想添加一个额外的 addListener,这样当用户单击地图时,它将在他们单击的位置添加另一个图钉。由于某种原因,我的“点击”addListener 不起作用。我如何拥有多个这样的添加监听器?

我附上我当前的代码:

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.7,-74.0),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    var marker = new google.maps.Marker({
      map: map,
      draggable: true
    });

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

      var image = "http://www.google.com/mapfiles/marker_green.png";
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);



      var address = '';
      if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addListener(map, 'click', function() {
    //alert("Hello! I am an alert box!!");

    var marker1 = new google.maps.Marker({
      map: map,
      draggable: true
    });
    var image = "http://www.google.com/mapfiles/marker_green.png";
      marker1.setIcon(image);
      marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
    map.addOverlay(marker1);
});

</script>

地图点击事件将返回鼠标点击的位置。

更新:要在添加新标记时删除旧标记,您需要在侦听器范围之外存储标记的实例,然后您可以在侦听器事件开始时删除它。

var singleMarker;

google.maps.event.addListener(map, 'click', function(event) {

    //if marker exists, erase marker
    if(singleMarker){
        singleMarker.setMap(null);
    }

    singleMarker = new google.maps.Marker({
        position: event.latLng, //mouse click position
        map: map,
        draggable: true,
        icon: "http://www.google.com/mapfiles/marker_green.png"
    });
});

Updated 小提琴的例子。 http://jsfiddle.net/sk5EQ/1

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

使用地理编码将多个 addListener 事件添加到 Google 地图表单 的相关文章

  • Typescript:按值检查对象是否存在于数组中

    我有这个数据 roles roleId 69801 role ADMIN roleId 69806 role SUPER ADMIN roleId 69805 role RB roleId 69804 role PILOTE roleId
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 为什么 jQuery 点击事件会多次触发

    我这里有这个示例代码http jsfiddle net DBBUL 10 http jsfiddle net DBBUL 10 document ready function creategene click function confir
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

    我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert 模块 我在 Meteor 应用程序中使用它 http djorg83 github io react bootstrap sweetalert http d
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 在 MVC Razor 中的 C# 和 Javascript 之间共享常量

    我想在服务器上的 C 和客户端上的 Javascript 中都使用字符串常量 我将常量封装在 C 类中 namespace MyModel public static class Constants public const string
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • Keycloak javascript 适配器 `keycloak.init` 加载 404 iframe

    我正在尝试使用 javascript 适配器将 Keycloak 集成到我的客户端应用程序keycloak js 但是 我似乎无法让它发挥作用 这是我的代码 const keycloak new Keycloak realm my real
  • 有关于 PHP 中的 V8JS 的文档吗?

    有没有关于V8JS的文档 我是否只需要标准 PHP 或一些扩展即可使用 V8JS 我将非常感谢有关 PHP 中的 V8JS 的任何信息 要求 PHP 5 3 3 和 V8 库和标头安装在正确的路径中 Install http www php
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • MySQL 从 3 个表中提取数据 - 连接和最大值

    我有三个 mysql 表 我想从中提取一些信息 这些表是 视频 表示带有分数的视频 标签 包含全局标签列表 VideoTags 在视频和标签之间创建关联 我想要做的是找到每个标签得分最高的视频 有很多具有相同标签的视频 但我的结果集将包含
  • SwiftUI 覆盖阻止列表滚动事件

    我想在 SwiftUI 中的列表顶部放置一个半透明图像叠加层 我试过这样的代码 struct ContentView View var body some View List Text first Text second Text thir
  • Swift 中的无符号字符

    在 Obj C 中 此代码用于将 NSData 转换为 unsigned char unsigned char dataToSentToPrinter unsigned char malloc commandSize 在 Swift 中 u
  • 如何将多个 html 表格导出到 Excel?

    我有一个包含 3 个表的网页 我想将所有 3 个表导出到同一个 Excel 文件 我希望每个表都在自己的工作表中 但将它们全部放在同一张工作表上也可以 经过一番谷歌搜索后 我所看到的只是将一张表导出到一张 Excel 工作表中 var ta
  • 正则表达式匹配大写表达式和单词

    使用 Sublime Text 3 我只想从文本中提取大写单词和表达式 例子 你好世界 这对所有人来说都是阳光明媚的一天 如果我使用查找工具 我可以使用此正则表达式单独提取所有大写单词 b A Z b 结果是 SUNNY 和 DAY 但我想
  • 模型绑定器未拾取表单编码的 Javascript int[]

    昨晚我试图整理一些自 MVC2 以来一直在工作的东西 给定以下课程 public class RouteSaveViewModel public string Title get set public string Comments get
  • 如何将回调转换为 Promise

    我正在使用 play 框架和 Apache Kafka 我有一个 POST 方法 可以向 Kafka 发送消息 Kafka有一个API方法 公共 java util concurrent Future 发送 ProducerRecord 记
  • 颤动错误:每个子项必须恰好布置一次。关于建筑布局

    我正在使用 flutter bloc 我有这样的代码 class Settings extends StatelessWidget final formKey GlobalKey
  • 如何在 javascript 中发送 SOAP 请求,就像在 SoapUI 中一样

    我目前正在开发一个 NodeJS 项目 我需要使用一些soap xml wsdl 问题是无法弄清楚其中任何一个是如何工作的 所以请原谅我的无知 这是我需要的 我有一个 WSDL 站点 我需要从中获取一些答案 我已经弄清楚如何在 SoapUI
  • 使用自定义操作卸载多个产品

    我正在为我们的产品开发基于 WIX 的安装程序 该产品有一个基础产品和许多插件 基础版和插件将作为单独的 MSI 提供 仅当底座可用时才能安装插件 基础和插件在根文件夹下共享公共文件夹树 例如 C Program files MyProdu
  • 当鼠标离开父级时,为什么 IE 8 会因引导、淘汰验证和自定义绑定处理程序而崩溃?

    好吧 这是一个疯狂的错误 我和同事无法弄清楚 Internet Explorer 8 崩溃 没有控制台错误消息 当使用具有自定义绑定 数据绑定 的无线电输入更改淘汰可观察值并且您移出父 DOM 容器时 就会发生这种情况 在 IE 8 浏览器
  • Roxy Fileman 与 TinyMCE 5 使用 file_picker_callback

    我试图upgradeTinyMCE 版本 4 起to ver 5 但函数 file browser callback 已被替换为文件选择器回调具有完全不同的参数 TinyMCE v 4 file browser callback funct
  • 无法创建使用文字零的通用函数

    我正在尝试编写一个与内置函数类似的 Rust 函数Range 但我想要的东西只会返回 X 个数字 并将其作为列表返回 这就是我尝试创建此函数的原因 外部板条箱编号 use num Integer fn positions
  • 将 JSF 应用程序迁移到 Weblogic 12

    我们开发了一个基于 Seam 2 的 Java EE 5 应用程序 它在 Weblogic 11g 上运行 现在 我尝试按照与之前的 WLS 相同的步骤将相同的 WAR 文件部署到新的 Weblogic 12c 本地 Windows 7 计
  • 如何使 Excel MIN 函数忽略集合中的零?

    在 Excel 中 我有以下公式 MIN H69 H52 H35 H18 1 H18 10应该返回MIN范围 并将其除以当前单元格 1 H18 然后乘以 10 我在添加 NULLIF 语句类型时遇到困难 我希望能够有 可能 空白行 并让 M
  • 如何使用 PHP 将 JSON 解析为 html 表?

    我必须在我的网站上找到一张桌子 并且必须从以下位置获取该表的数据 我已经尝试了很多东西但没有任何作用
  • 在 C# 中实现接口与显式实现接口 [重复]

    这个问题在这里已经有答案了 我在 VS2010 中有两个用于实现接口的选项 当我有 IHelper cs 界面如下 public interface IHelper IEnumerable
  • 无法加载 python gstreamer 元素

    我正在跟随指南https mathieuduponchelle github io 2018 02 01 Python Elements html gi language undefined https mathieuduponchelle
  • Xcode:内存使用情况比较

    在 xcode 中模拟 iOS 时 丢失 3 4 的内存给 其他进程 正常吗 是的 这是正常的 其他进程 实际上包括 Mac 上当前运行的所有其他程序 这个数字与模拟器无关 它不测量模拟器中运行的进程 如果您运行 iOS Simulator
  • 使用地理编码将多个 addListener 事件添加到 Google 地图表单

    我创建了一个 Google 地图表单 允许用户在文本字段中输入地址并对条目进行地理编码 然后这会在地图上放置一个标记 这工作正常 但我想添加一个额外的 addListener 这样当用户单击地图时 它将在他们单击的位置添加另一个图钉 由于某