将 infoWindow 放置在远离标记的静态位置(Google 地图)

2024-02-05

我想要实现的(到目前为止找不到任何东西)是 infoWindow 没有附加到标记。我想将其放置在视口中的静态位置,并根据单击的标记交换内容。

问:如何将谷歌地图标记信息窗口放置(而不仅仅是偏移)到固定位置。


回答我自己的问题 - 如果有人需要这个:

// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>

<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
    // map_object_name = the name of your map when you init()
    html = "<strong>" + whatever + "</strong>";

    var marker = new google.maps.Marker( {
        map: map_object_name,
        position: new google.maps.LatLng( lat, lng )
    } );

    // This snippet adds the content on the fly (when you click the marker)
    google.maps.event.addListener( marker, 'click', function() {
        // This pans the viewport/centers the marker in your viewport
        map_object_name.panTo( new google.maps.LatLng( lat, lng ) );

        // This shows the html-element with the id "info" and adds the html content
        jQuery( '#info' ).show();
        // This clears the content before you add new one
        jQuery( '#info' ).empty();
        jQuery( '#info' ).append( html );

        // Commented out - just as reference
        // infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
        // infoWindow.open( map_object_name, marker ); // the same, just the callback
    } );
}
</script>

“放置”/定位#info元素可以用普通的 html 和 css 来完成。

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

将 infoWindow 放置在远离标记的静态位置(Google 地图) 的相关文章

  • Google Maps API v3 - 为什么没有事件上下文?

    第一次使用 Google Maps API v3 我得到了一张带有一堆标记的地图 我想做到这一点 以便当您单击其中一个时 将显示一个特定的信息窗口 特定于您单击的标记 我真的很惊讶点击事件没有告诉您被点击的实际标记 我知道有一个解决方案使用
  • 如何使用 pincode 作为输入查找纬度和经度列表

    有什么方法可以使用 zip pincode 找到纬度和经度列表吗 Input 560103 Output 12 123456 72 123456 12 123654 72 366666 12 123456 72 123456 on goog
  • 从谷歌地图中删除标记簇[不仅仅是标记]

    在我的phonegapp cordova应用程序中 我使用谷歌地图工具 有时我需要更改其上显示的点 我发现了一些有用的代码here https developers google com maps documentation javascr
  • ... 不支持谷歌地图 Javascript API。使用其他浏览器

    我正在使用两个不同的第三方程序 不同的公司 它们显然使用 Google Maps Javascript API 当他们加载地图时 会显示世界地图 但会显示一条错误消息 Der von Ihnen verwendete Browser wir
  • Qt 和 Google 地球 API

    是否可以使用 Google Earth 在 Qt 中开发应用程序 例如 我想在我的应用程序中通过 QtGL 将地球 如谷歌地球 显示为球体 很明显 您可以在 Qt 中使用 google Earth api 我想分享一个秘密 Google E
  • 没有地图的地理编码

    我可以在没有地图的情况下使用 Google 地图地理编码 API 吗 我有一个带有自动完成功能的文本框 Google Maps API Place 我希望在用户输入街道号码后 我会得到邮政编码 问候 自动完成是允许在没有地图的情况下使用 G
  • Google Maps API v3:单击 DOM 元素时关闭信息窗口

    我是第一次使用 Google 地图 所以我在 CSS Tricks 上查看了一个很好的教程 http css tricks com google maps slider http css tricks com google maps sli
  • 将谷歌地图标记颜色更改为我选择的颜色

    无论如何 是否可以从默认的红色标记颜色更改为我选择的十六进制颜色 我一直在寻找堆栈溢出 但似乎没有找到答案 这是我到目前为止所拥有的 var marker new google maps Marker position myLatLng l
  • 谷歌地图响应式调整大小

    我试图让谷歌地图响应并调整大小 同时在窗口调整大小时保持其中心 我阅读了其他堆栈问题 例如 响应式谷歌地图 https stackoverflow com questions 15421369 responsive google map a
  • 光标在 Google 地图应用程序中消失

    这确实很奇怪 使用 API v3 创建 Google 地图应用程序后 有时当我将光标悬停在地图上时 鼠标光标会消失 我需要与地图之外的几个控件进行交互 当我点击其中一个并且地图失去焦点后 问题就显现出来了 这事发生在别人身上过吗 我尝试将焦
  • Google 地图 API - 添加多个目的地不起作用(谷歌方向)

    我在创建 复制谷歌地图方向功能时遇到问题 当我有 从 到 字段时 我可以让它正常工作 但一旦我尝试添加多个目的地 它就不起作用 我看过我们 但我没有得到任何很好的示例教程来展示这是如何完成的 以下是我到目前为止所做的事情 但我很确定这件事做
  • Google 地图 - 未捕获 InvalidValueError:初始化不是函数

    当我加载 Google 地图显示的页面时 我总是在控制台中看到以下错误 未捕获的 InvalidValueError 初始化不是函数js 传感器 假 回调 初始化 94 将鼠标悬停在文件名上时 这显示为源自 谷歌地图窗口和地图显示得非常好
  • 如何摆脱“Google 地图方向服务”标记?

    谷歌地图Direction ServiceApi有两个 副作用 1 它添加了Markers自动到达出发地和目的地 2 它增加了两个InfoWindow到新的Markers 包含他们的地址 知道如何摆脱这些标记及其信息气泡吗 添加suppre
  • Google Map API V3 - 单击标记以叠加形式显示更多信息内容(如 Google 地图中一样)

    我们使用 Google Map Api V3 在 HTML 容器中加载 google 地图 我们有一个位置搜索表格 提交后 我们将获取可用位置并在地图中设置标记 加载标记后 单击每个标记时我们需要显示标题 地址详细信息和设计 就像我们在谷歌
  • 谷歌地图搜索框在地图外面

    我正在使用 Google Maps API 并且插入了一个具有自动完成功能的搜索表单 问题是输入框卡在地图中 我无法将其显示在地图之外 div style margin top 100px background 00a6d6 width 1
  • 导致链接平移并打开地图中的标记

    JSFiddle http jsfiddle net megatimes NVDLf 7 http jsfiddle net megatimes NVDLf 7 我有一张地图 它从数组创建多个标记 地图下方是一些链接 单击这些链接时 我想让
  • 如何使用地点 ID 获得指向 google 地图上某个地点的直接链接

    我的应用程序中有谷歌地图上某个地点的地点 ID 有没有办法将地点 ID 放入 URL 中并使其直接链接到页面 还是必须通过URL来完成 我似乎在文档中找不到任何详细说明这一点的内容 我在下面尝试过 但它只是让我得到标准的谷歌地图页面 htt
  • Google 地图 api 中的 infoWindow 数组

    我寻找错误 但找不到它 由于某种原因 任何谷歌地图信息窗口总是显示相同的信息 这是一个咖啡脚本代码 infowindow new google maps InfoWindow for company in companiesData mar
  • google.maps.Geocoder.geocode() Geometry.location lat/lng 属性名称经常更改

    我有一个应用程序 我正在使用 Google Javascript 地理编码 API 来获取地址的纬度 经度 代码是这样的 geocoder new google maps Geocoder geocoder geocode address
  • 如何在 Google Maps API 中指示语言?

    就像你访问一样maps google com tw or maps google co kr or maps google co jp 您可以看到每个国家 地区都显示自己的语言 我可以在 Google 地图 API 中使用任何属性来动态设置

随机推荐

  • 在 Yii 中创建三个以上表的关系

    当我尝试在 Yii 中创建三个以上表的关系时 以下方法给我带来了麻烦 public function relations return array info gt array self BELONGS TO Software ITEM ID
  • Swift 可以从异步 Void 返回块返回值吗?

    我想创建一个函数来检查 user id 是否已在我的数据库中 class func checkIfUserExsits uid String gt Bool userRef childByAppendingPath uid observeS
  • printf 的包装

    我在Arduino下编码 我想开发串行打印格式化功能 所以我尝试使用sprintf未知大小的缓冲区 基本上 我们可以避免谈论 Arduino 及其串行输出 并考虑将文本写入缓冲区 然后使用printf 我试过这个 include
  • matplotlib.mplot3d 立方体表面的底图

    正如标题所示 我试图在 matplotlib mplot3d 线图的 z 0 表面上绘制底图地图 我知道 Axes3D 对象能够在 z 0 表面上绘图 通过 Axes3D plot Axes3D scatter 等 但我不知道如何使用 Ba
  • 从一组坐标中找到最接近的坐标

    我有大约 1000 组地理坐标 纬度 经度 给定一个坐标 我想从该集合中找到最接近的一个 我的方法是测量距离 但每秒数百个请求对于服务器执行所有数学运算来说可能有点粗糙 对此最好的优化解决方案是什么 Thanks 您将想要使用 最近邻算法
  • 在 setter 方法的情况下,为什么 irb 会回显赋值的右侧而不是返回值?

    令人惊讶的是 在所有其他情况下 irb 都会回显方法的返回值 为什么通过 setter 进行分配的行为会有所不同 我正在使用 Ruby 2 2 2 irb main 001 0 gt def x value puts puts from x
  • 统计同一张表上多个条件的SQL

    我正在尝试编写一个查询 返回在 2020 年 1 月 1 日之后购买 镜子 或 自行车 并且在 12 个月内还购买了 书 或 沙发 的客户 使用计数以防他们购买多次 我编写的查询不完整 因此我需要一些帮助 我缺少计算未来 12 个月内订单数
  • 如何将 LINQ 查询相互附加?

    我有一个表单 可以根据他们选择的内容过滤数据 我正在尝试将 linq 查询相互附加 以便最终结果是他们在屏幕上选择的结果 这是我的代码 private void button Search Click object sender Event
  • Spring JPA:从异步方法处理时数据未保存到数据库

    我有一个使用 Spring JPA 的应用程序 并使用 Async spring 注释执行一些后台进程 该过程需要将参数保存在数据库中 或者如果参数已经存在则更新数据库 这不能正常工作 因为在 Async 方法完成后我的数据实体没有保留在数
  • beans.xml 上的文件过早结束

    xml 的内容
  • 通过 Rails 3 中的范围进行预加载

    我一直在尝试根据 Rails3 应用程序中的某些范围急切加载关联 但找不到任何解决方案 我的应用程序有以下型号 class Project has many entries has many to dos class ToDo has ma
  • 强制触摸 UITableViewCell 内的 UICollectionView

    我有一个带有 Tableview 的 viewController 多个 TableViewCell 并且在每个 TableViewCell 中都有一个带有多个 UICollectionViewItems 的 UICollectionVie
  • 纯 JS 幻灯片菜单,能够“在菜单外部单击”关闭它

    我正在尝试重新表述我的问题 并将完成我所做的所有步骤 特别是我失败的地方 我对 JS 的了解并不深 但有通过实践学习的意愿以及社区的帮助 我偶然发现这个答案 https stackoverflow com a 38317768 559718
  • 使用 POST 请求重定向的好方法?

    我需要通过 POST 请求将用户重定向到外部站点 我想到的唯一选择是通过 JavaScript 提交表单 有任何想法吗 不太明白你的意思 所以我们举几个场景 用户应该将表单发布到您自己以外的服务器 很简单 只需将目标指定为表单操作即可
  • (Codesandbox,Vue)“属性或方法“children”未在实例上定义,但在渲染期间引用。”

    我目前正在构建一个状态管理器 它可以集成到多个前端框架中 包括 Vue 为了演示 Vue 中状态管理器的用法 我创建了一个简单的codesandbox 因为有一个实时代码示例总是很好 可以在自述文件中进行推广 但不知何故 我总是在代码和框中
  • Path 中加号的 Data 值是多少

    如何使用 Path 对象中的 data 属性绘制加号和减号 这是我的三角形路径对象 我需要将其更改为加号
  • JS 客户端 Exif 方向:旋转和镜像 JPEG 图像

    数码相机照片通常保存为带有 EXIF 方向 标签的 JPEG 为了正确显示 图像需要根据设置的方向进行旋转 镜像 但浏览器会忽略渲染图像的此信息 即使在大型商业 Web 应用程序中 对 EXIF 方向的支持也可能不稳定1 http www
  • Android:发送数据存储在MySQL中

    Solved 缺少 postData 的视图参数 已更改以反映这一点 我需要一些帮助 将 GPS 数据发送到服务器 该数据将使用 PHP 存储在 MySQL 数据库中 这是在我的 Java 文件中 ArrayList
  • JLabel setText 不更新文本

    我正在尝试使用以下方法更新 JLabelsetText 方法 但我无法重绘 JLabel 我必须使用repaint 方法来做到这一点 这是代码的一部分 我没有收到任何错误 但它没有更新 JLabel public void actionPe
  • 将 infoWindow 放置在远离标记的静态位置(Google 地图)

    我想要实现的 到目前为止找不到任何东西 是 infoWindow 没有附加到标记 我想将其放置在视口中的静态位置 并根据单击的标记交换内容 问 如何将谷歌地图标记信息窗口放置 而不仅仅是偏移 到固定位置 回答我自己的问题 如果有人需要这个