使用 Google Maps API 进行地理编码 - 更新现有标记而不是添加另一个标记

2023-12-01

在进行地理编码时,如何简单地将现有标记移动到新地理编码结果的结果中。

让我们看这个例子:

  • 地图加载时,会出现一个标记
  • 当有人进行地理编码时,标记会移动到结果
  • 标记是可拖动的,因此用户可以进一步移动标记(如果他们愿意)
  • 也许他们想要重新对位置进行地理编码,因此新结果应该自动移动现有标记。

在此示例中:

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

...为每个新的地理编码绘制一个新标记。

那有意义吗?

谢谢!!!

-m


  1. 使标记全局化。
  2. 在创建新的之前检查它是否存在。
  3. 如果存在,请使用 .setPosition 将其移动到新位置
  4. 如果不存在,请在所需位置创建一个标记。

做一些接近你想要的事情的例子

工作代码片段:

var map = null;
var marker = null;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-34)});

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(42, -85),
    zoom: 4
  });
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      content = results[0].formatted_address;
      infowindow.setContent(content);
      if (marker && marker.setPosition) {
        marker.setPosition(results[0].geometry.location);
      } else {
        marker = new google.maps.Marker({
          map: map,
          icon: {
            url: 'http://maps.google.com/mapfiles/arrow.png',
            anchor: new google.maps.Point(10, 34)
          },
          position: results[0].geometry.location
        });
        google.maps.event.addListener(marker, 'click', function(evt) {
          infowindow.open(map);
        });
      }
      infowindow.setPosition(results[0].geometry.location);
      infowindow.open(map);
    } else {
      alert('Your search was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<input id="address" value="New York, NY" />
<input id="geocode" type="button" value="Find" onclick="codeAddress()" />
<div id="map-canvas"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Google Maps API 进行地理编码 - 更新现有标记而不是添加另一个标记 的相关文章

  • 使用 JavaScript 格式化日期

    JavaScript 中的日期格式有问题 这是我的函数代码 originalDate 2016 03 02 09 12 14 989522 var d new Date originalDate month d getMonth 1 day
  • 在具有子项的“contenteditable”div 中设置插入符位置

    我有一个这样的 HTML 结构 div This is some plain boring content div 我还有这个函数 允许我将插入符位置设置到 div 中我想要的任何位置 Move caret to a specific po
  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au
  • javascript:全局变量泄漏

    每当我向 Firefox 提交插件时 我都会收到一封电子邮件 告诉我我的一些变量正在泄漏到全局范围内 一旦他们告诉我我解决了问题 但在那之前有什么方法 程序 来检查变量是否泄漏到全局范围内 Thanks Both JSLint http w
  • 如何找到特定路线上两点之间的距离?

    我正在为我的大学开发一个 Android 应用程序 可以帮助学生跟踪大学巴士的当前位置 并为他们提供巴士到达他们的预计时间 截至目前 我获取了公交车的当前位置 通过公交车上的设备 和学生的位置 我陷入了必须找到两个 GPS 坐标之间的距离的
  • HTML 和 标签有什么区别?

    HEAD 标签和 BODY 标签有什么区别 大多数 HTML 书籍仅 简短 提及 and 标签 但它们消失得很快 它们会影响浏览器呈现网页的方式吗 另外 它们会影响 javascript 的运行顺序吗 我的意思是 如果我里面有一个javas
  • 有什么方法可以复制 div 的渲染 HTML 吗?

    我正在开发电子邮件签名生成器 我想通过按按钮复制最终签名 而不是手动选择签名并将其复制到剪贴板 这意味着我需要它们的图像 文本和样式 我尝试了几种变体 包括 w3schools 的变体 但没有成功 其中一些只是复制文本 但没有样式 例子 h
  • 调用类实例方法 onclick javascript

    我有一个 javascript 文件 其中包含包含方法函数的类 我想知道如何从 onClick 事件调用类实例方法 function MyClass this instanceData Display Me this DisplayData
  • jQuery UI Datepicker 奇怪的行为

    我在使用 jqueryUI 使用简单的日期选择器时遇到了一个奇怪的问题 我只想显示两个月的日历 包括上个月和当前月份 我使用了这段代码 function picker datepicker numberOfMonths 2 showCurr
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 仅在 Chrome 上我收到此错误:Uncaught TypeError: Illegal constructor [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 当我在 Chrome 上加载 jQuery 时 我会收到此错误 Uncaught TypeError Illegal constr
  • 转义 \u200b(零宽度空格)和其他非法 JavaScript 字符

    我有一组 JavaScript 对象 我引导到后端模板 以在页面加载时初始化我的 Backbone js 集合 它看起来像这样 作为 Twig 模板 我遇到的问题是某些文本字段包含 u200b 零宽度空格 这会破坏
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • for循环中需要声明变量吗?

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全
  • Google Maps API v3 Places 库返回未定义的 utc_offset

    我正在开发一个时间和位置感知应用程序 谷歌地图 v3 api 地点库几乎拥有我需要的一切 但是 当对特定地址执行 textSearch 并尝试为返回的 PlaceResult 项目之一调用 getDetails 时 从 getDetails
  • 如何从除自身之外的其他(blazor)库引用js/css文件?

    我如何引用 使用位于引用的 blazor 项目中的 css cs 文件 该文件与 host cshtml 中的当前项目不同 我的意思是
  • 将两个数字相加将它们连接起来而不是计算总和

    我将两个数字相加 但没有得到正确的值 例如 做1 2返回 12 而不是 3 我在这段代码中做错了什么 function myFunction var y document getElementById txt1 value var z do
  • 如何为 jQuery 插件设置私有变量?

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti

随机推荐

  • 编辑框提示 - 始终显示提示

    我有一个带有提示的文本框 但我希望始终显示提示 即使 TB 中有输入也是如此 示例是 Gmail 应用程序中的 收件人 字段 您可以使用 3 种方法 剧透 使用数字 3 因为正如我的评论中提到的 在 Gmail 示例中 它不是实际的提示 在
  • Observable Angular2

    我的 Angular2 应用程序中有对象数组 当新对象到达时 我使用 SignalR 填充数组 现在的重点是当新对象到达时我遇到了错误 无法读取未定义的属性 我认为这可能是错误的 因为它的工作是异步的 并且在 html 中我曾经在对象内部获
  • WIF - FederatedSignOut 未将用户注销所有站点

    我正在使用 Windows 身份基础 对于一些 MVC 2 0 站点 我在将某人从所有受 WIF 保护的网站中注销时遇到了真正的问题 看起来我的注销只是将当前站点上的人员注销 这是我的代码 public void FederatedSign
  • Rails:从另一个模型调用一个模型。为什么这是不可能的?

    我有以下型号 class Room lt ActiveRecord Base belongs to hotel belongs to layout has many visits validates number presence true
  • 调用fopen时的内存分配不清楚

    1 File fp 2 fp fopen etc myfile txt w 3 fclose fp Now 我读了这个 在语句 1 中 在堆栈上为指针创建了一个 FILE 类型的 4 字节内存 在语句2中 在堆上分配了一块内存 sizeof
  • Firebase 实时数据库 CORS 问题

    我在网站上使用 Firebase 实时数据库 一切正常 但是 当我想使用自定义 json 令牌进行身份验证时 我收到如下 CORS 问题 来自另一个被阻止的源的请求 相同的源策略阻止读取远程资源位于https www googleapis
  • 设置自定义锚点

    有没有办法在实际 HTML 标记之外的位置自定义设置锚点 我正在使用这个简单的视差滚动脚本 名为 smoothscroll js at http www kryogenix org code browser smoothscroll smo
  • 执行中的Python sqlite3字符串变量

    我尝试在 Python 中执行这个 sqlite3 查询 我将代码减少到最少 sqlite connect 等有效 column Pron 1 Pers Sg goal gender constrain Mann with con cur
  • 为什么BroadcastReceiver没有在后台运行?

    在一个应用程序 App1 中 我正在广播一条消息 下面的代码是正确的 gt 如果我尝试在同一项目中获取广播 则会检测到广播 sendBroadcast new Intent com example MESSAGE INTENT putExt
  • 为什么[对象释放]后retainCount还是1?

    NSLog first u object retainCount object release NSLog second u object retainCount Output first 1 second 1 为什么对象没有被释放 引自
  • 删除或替换零宽度非连接字符

    我想删除零宽度非连接器字符串中的字符但使用str replace没用 只要您小心替换的内容 str replace 应该可以解决这个问题 xE2 x80 x8C is ZERO WIDTH NON JOINER foo foo xE2 x8
  • 找不到类 javax.naming.directory.InitialDirContext

    我正在使用此链接中的示例http www rgagnon com javadetails java 0452 html但我收到错误 Could not find class javax naming directory InitialDir
  • 如何在 src/main/resources 中创建文件

    如果我这样做 fis new FileInputStream new File getAbsolutePath sudoinput txt 它尝试写入服务器上的此位置 我不确定这是否可写 地方 FILE NAME fos opt tomca
  • 为什么我的 urls.py 不能与 Django 一起使用

    今天 当我用 Building a blog in 30 mins with Django Screencast 编写我的博客时 我遇到了一些问题 当我点击文章标题时 它无法出现正确的页面 Page not found 404 Reques
  • 在 Magento 中停止事件观察者结帐的正确方法是什么?

    我正在 checkout controller onepage save shipping method 活动期间验证运输报价 如果验证失败 我想将用户发送回运输方式选择 但我还想显示一条消息 说明失败的原因 Magento 有内置的方法吗
  • 为什么这个日期转换需要在月份上加1?

    我在 JavaScript 中有这个日期变量 scope dt内容是Tue Jul 08 2014 00 00 00 GMT 0800 Malay Peninsula Standard Time 我想将其转换为返回一个字符串2014 7 8
  • Altair 颜色分级值

    在以下直方图中对分级值进行着色时遇到问题 我打算对 x 轴 信用度 上小于 50 的所有条形进行着色 在 Altair 中这是如何完成的 base alt Chart X train histogram base mark bar enco
  • 将 javascript 客户端连接到 python websocket 服务器

    我有这个工作 python websocket 服务器 usr bin env python from socket import HOST PORT 8080 BUFSIZ 1024 ADDR HOST PORT tcpSerSock s
  • 如何使用开始和结束索引对 numpy 行进行切片

    index np array 1 2 2 4 1 5 5 6 z np zeros shape 4 10 dtype np float32 有什么有效的设置方法z np arange 4 index 0 z np arange 4 inde
  • 使用 Google Maps API 进行地理编码 - 更新现有标记而不是添加另一个标记

    在进行地理编码时 如何简单地将现有标记移动到新地理编码结果的结果中 让我们看这个例子 地图加载时 会出现一个标记 当有人进行地理编码时 标记会移动到结果 标记是可拖动的 因此用户可以进一步移动标记 如果他们愿意 也许他们想要重新对位置进行地