使用地理编码将多个 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 地图表单 的相关文章

  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • JavaScript 中的埃拉托斯特尼筛法对大量数据无限运行

    我一直在尝试写埃拉托斯特尼筛法 http en wikipedia org wiki Sieve of EratosthenesJavaScript 中的算法 基本上我只是按照以下步骤操作 创建从 2 到 n 1 的连续整数列表 令第一个素
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 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 这样当用户单击地图时 它将在他们单击的位置添加另一个图钉 由于某