拖动后标记位于地图中心

2023-12-11

我在我的网站上实现了谷歌地图。用户可以拖动标记并获取坐标。它工作正常,但要求是当用户拖动标记时,拖动标记后应该出现在地图窗口的中心,或者如果用户拖动地图,那么在这种情况下标记也出现在地图窗口的中心。

我有以下代码,仅适用于地图上的拖动标记, 但我不知道在哪里添加拖动后将标记移动到地图窗口中心的函数或代码。

该代码写如下:

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '</p>';
    var point = marker.getPosition();
       map.panTo(point);
});

google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
    //-------------
    //------------
});

http://jsfiddle.net/ANJYR/6xq6pujk/


这是(我认为)一个更简单的解决方案......或者我不太明白你想要实现的目标。

//Dragable Marker In Google Map....

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

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

google.maps.event.addListener(myMarker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

function updatePosition(lat, lng) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>';
}

JSFiddle demo

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

拖动后标记位于地图中心 的相关文章

  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • 将上部字符转换为下部字符,将下部字符转换为上部字符(反之亦然)[重复]

    这个问题在这里已经有答案了 我需要将某些字符串中的所有较低字符转换为较高字符 并将所有较高字符转换为较低字符 例如 var testString heLLoWorld 应该 HEllOwORLD 转换后 在不保存临时字符串的情况下实现此目的
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too

随机推荐

  • TS(2352) 声明具有动态属性的对象和一个具有特定类型的属性

    我需要创建一个对象 该对象将包含一个名为 state 的属性 该属性将具有通用类型 所有其他属性将是具有覆盖上下文的函数 我不确定这是否可能 因此我决定写在这里 我有一个代码 declare interface ContextModule
  • MySQL 连接运算符

    我不知道 MySQL 的连接运算符 我已经尝试过这段代码用于串联 SELECT vend name vend country FROM Vendors ORDER BY vend name 但这没有用 我应该使用哪个运算符来连接字符串 是
  • golang json 和接口切片

    我在迭代包含接口切片的接口切片时遇到问题 此问题是在尝试使用返回 JSON 数据的 API 调用时出现的 返回的数据相当多 并且结构根据请求的不同而有很大差异 API 文档中也没有 JSON 响应的结构 因此我尝试实现一些处理任意 JSON
  • 如何后台加载sapui5资源

    在我们的应用程序中 我们加载了许多 SAPUI5 库 index html 有以下代码来加载 SAPUI5 资源 在我们的 web xml 中我们已经提到https sapui5 hana on
  • dotnet 不支持多重继承。但多接口支持吗? [复制]

    这个问题在这里已经有答案了 可能的重复 C 中的多重继承 dotnet 不支持多重继承 但多种接口支持 为什么会存在这种行为 有具体原因吗 您可以使用接口模拟多重继承 如果允许类的多重继承 则会导致钻石问题 由于不支持多重继承的原因 我建议
  • IF 条件 - 连接多列

    我需要统计一个术语出现的次数 不幸的是 这些术语组织得不好 因此一个术语可能会出现在多个列中 所以我不能只使用 If A1 HEALTH 1 0 因为HEALTH出现在多个列 A B C 等中 我尝试过嵌套 IF A1 HEALTH 1 I
  • 为什么 TF-IDF 的值与 IDF_ 不同?

    为什么向量化语料的值与通过向量化得到的值不一样idf 属性 不应该idf 属性只是以与语料库矢量化中出现的相同方式返回逆文档频率 IDF from sklearn feature extraction text import TfidfVe
  • 只有一个底层锁的读写锁?

    我已经使用 Python 的并发原语编写了一个读写锁 我认为 我在 SO 或其他地方读到的每个实现似乎都使用 2 个锁 一个用于读取 另一个用于写入 我的实现只包含一个用于读取的监视器 但我可能遗漏了一些重要的东西 任何人都可以确认这会起作
  • 电晕将单选按钮转换为数字文本框(lua)

    我正在尝试创建一个有关医疗保健的移动应用程序 我必须创建一个类似调查的应用程序来筛选患者 现在我已经使用单选按钮完成了调查的一部分 另一部分也看起来像这样 见下图 但我希望单选按钮更改为数字文本框 我的应用程序看起来像这样 现在我想将单选按
  • lapply 代替 for 循环进行随机假设检验 r

    我有一个看起来像这样的 df set seed 42 ID lt sample 1 30 100 rep T Trait lt sample 0 1 100 rep T Year lt sample 1992 1999 100 rep T
  • Rails table_name_prefix 未按预期工作

    我正在使用 Rails 4 我有app models admin rb and app models admin retention email rb有这样的东西 app models admin rb module Admin def s
  • 在 Javascript 中监听我的 Flash 事件

    我正在尝试使用 OVP 播放器构建一个带有播放列表的基本视频播放器 到目前为止 我已经弄清楚如何使用ExternalInterface输入新的视频源 但我不知道如何侦听Flash事件 EVENT END OF ITEM 如何在 Javasc
  • 如何使新添加的复选框与任务一起工作?

    我已在我的 inno 设置任务页面添加了新的复选框 但我不知道如何使它们与任务一起工作 我希望它们与脚本中的 任务 区域一起工作 Tasks Name Newcheckboox1 Description Newcheckbox1 MinVe
  • 使用附件时,Send-MailMessage 会关闭每第二个连接

    我正在尝试编写一个 powershell 脚本来向 30 个人发送带有一些附件的电子邮件 这些电子邮件是个性化的 因此必须单独发送 该脚本无需附件即可正常工作 但是 使用附件时 Send MailMessage 的所有其他实例都会失败 并显
  • 更改悬停时的背景图像

    图像的比例与该问题有关系吗 menu background black width 100 height 45px menu ul text decoration none list style type none menu li text
  • 将 UIImage 转换为 8 位

    我希望将 UIImage 转换为 8 位 我尝试这样做 但我不确定我是否做得正确 因为稍后当我尝试使用图像处理库 leptonica 时收到一条消息 指出它不是 8 位 谁能告诉我我是否正确执行此操作或如何执行此操作的代码 Thanks C
  • 将列表拆分为大小递减的子列表

    假设我有一个列表 list 0 1 2 3 我如何将列表分成类似的内容 new list 0 1 2 3 1 2 3 2 3 3 我尝试过使用 def change list new list for i in range len list
  • rPython 包无法在 R Shinyshinyapps.io 上安装

    shinyapps io 服务器没有安装 python 吗 因为包rPython安装失败 需要安装python 如果答案是否定的 我觉得很奇怪 因为 RStudio 本身有蟒蛇支持 shinyapps io 服务器是否支持 python 或
  • 在 Google Cloud Platform 存储桶上托管静态网站时的 DNS

    抱歉 如果我的问题看起来很混乱 我对 DNS 或托管只有一个基本的了解 故事是这样的 我创建了几个个人网页并注册了一个域名 然后我发现我的几个页面不需要 大 托管 最好在云中托管一个网站 我选择了 GCP 进行托管 发现this教程并遵循以
  • 拖动后标记位于地图中心

    我在我的网站上实现了谷歌地图 用户可以拖动标记并获取坐标 它工作正常 但要求是当用户拖动标记时 拖动标记后应该出现在地图窗口的中心 或者如果用户拖动地图 那么在这种情况下标记也出现在地图窗口的中心 我有以下代码 仅适用于地图上的拖动标记 但