Google Map API V3 - 单击标记以叠加形式显示更多信息内容(如 Google 地图中一样)

2024-04-29

我们使用 Google Map Api V3 在 HTML 容器中加载 google 地图。我们有一个位置搜索表格。提交后,我们将获取可用位置并在地图中设置标记。加载标记后,单击每个标记时我们需要显示标题、地址详细信息和设计,就像我们在谷歌地图中一样。 (在谷歌地图中 - 当点击红色标记时,我们可以看到更多信息覆盖框,其中包含其他详细信息,例如星星,方向,附近搜索,保存到地图,更多......)

我们是否有内置 api 函数来加载上面的覆盖框。或者我们没有像目前谷歌地图那样加载详细信息的功能。

当我在谷歌和地图文档中搜索时,我可以看到显示叠加窗口并在框中写入内容的选项。但我没有看到根据需要加载内容的选项。

我粘贴了下面的代码以供参考。

       var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

   function fnLoadMarkers(){
var locations  = [
    ['S Dakota', 43.834527,-103.564457, 1],
    ['Texas', 31.428663,-99.418947, 2],
    ['California', 36.668419,-120.249025, 3],
    ['Newyork', 43.197167,-76.743166, 4],
    ['Missouri', 38.410558,-92.73926, 5]
];
setMarkers(map,locations);
   }
 function setMarkers(map, locations) {
var image = 'images/marker.gif';

for (var i = 0; i < locations.length; i++) {
    var currLocation = locations[i];
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        title: currLocation[0],
        zIndex: currLocation[3]
    });
    google.maps.event.addListener(marker, 'click', function() {
        var latitude = this.position.lat();
        var longitude = this.position.lng();
        window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
    });
  }

}

如果有任何关于如何实现这些结果的提示,将会很有帮助。另外,请指导,是否可以通过Google API V3。

提前致谢,

Regards

斯里尼瓦桑


我不明白为什么您要从 Google 地图 API 标记打开 Google 地图的新窗口? 您无法通过 URL 在 Google 地图上添加信息窗口。

我就是这样做的。

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html> 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Map API V3 - 单击标记以叠加形式显示更多信息内容(如 Google 地图中一样) 的相关文章

  • Facebook 自定义故事与大图像 - 使用 Javascript 打开图

    我正在尝试创建一个自定义故事 每次有人尝试发布它时都会有一个新图像 现在我创建了一个对象 以及将两者结合起来的动作和故事 我想要实现的是一个看起来像这样的故事https fbcdn dragon a akamaihd net hphotos
  • AngularJS:选择非 2 路绑定到模型

    我正在使用选择来显示客户名称 用户应该能够选择现有客户端 然后更新范围属性 控制器 初始化 首选 if scope clients length gt 0 scope existingClient scope clients 0 View
  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为
  • jQuery UI 可排序和对话

    是否可以在两个列表之间拖动 jQuery UI 可排序列表项 其中一个在 jQuery UI 对话框中 另一个不在 jQuery UI 对话框中 我正在尝试创建一个对话框 用户可以将表单字段从对话框中拖到页面上的表单中 但我无法将项目拖出对
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 在移动网站中处理 iPhone 事件(如向左滑动)

    iPhone 浏览器是否有可以使用 Javascript 挂钩的特殊事件 例如 如果用户向左滑动 我想执行某个操作 如果有类似的活动 很高兴看到所有这些活动的参考 理想情况下 有一天所有触摸屏移动浏览器都会有一个标准 您可以访问多点触控事件
  • 可选回调的 JavaScript 样式

    我有一些函数偶尔 并非总是 会收到回调并运行它 检查回调是否已定义 函数是一种好的风格还是有更好的方法 Example function save callback do stuff if typeof callback undefined
  • 如何使用 jest 通过 Promise.all 设置多次提取测试

    我在测试中使用 jest 我正在使用 React 和 Redux 并且执行以下操作 function getData id notify return dispatch gt dispatch anotherFunction Promise
  • 模拟节点外部模块默认使用 jest 的链式方法

    在我们的节点 CLI 中 我们有一个简单的方法 use strict const ora require ora module exports function startSpinner textOnStart color spinnerT
  • 如何在具有现有记录的 json 数据表顶部添加新行

    我试图在数据表顶部添加一行 显示 金额 列的总和 我正在使用 json 数据表 jquery 插件 列表来显示数据表 如何将此行与现有行一起添加到数据表顶部 我认为这段代码会对你有所帮助 var json uid user123 first
  • Socket.io 与服务器离线连接

    如何检测服务器是否离线或由于其他原因无法连接 我的代码看起来像这样 this socket io connect connectionInfo reconnect false 它不会抛出任何错误 因此 try catch 子句不起作用 Us
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • Babel/RequireJS + typeof“RangeError:超出最大调用堆栈大小”

    我有一个非常基本的 JS 错误 我很羞愧无法解决它 我正在使用 ES6 和 Babel 进行开发 并且正在做一些实验 请注意 我在 Babel 中使用了这些参数 presets es2015 plugins transform es2015
  • 有没有办法从画布上清除一个元素而不消除其他元素?

    我正在使用画布构建页面加载器 并使用 es6 类 虽然目前我无法使其正常工作 原因之一是我找不到清除画布的方法进展 到目前为止 这是我的代码 class Loader constructor width height this width
  • 使用 javascript/jquery 从数据库格式化日期的正确方法

    我正在调用包含日期时间数据类型的数据库 日期看起来像这样 2005 05 23 16 06 00 000 当用户从列表中选择某个项目时 我想在表格中显示它 我调用我的控制器操作并返回所有时间的 Json 并将它们放入表中 问题是日期完全错误
  • JsGrid 将嵌套对象加载到表中

    我正在 Django 中开发一个 Web 项目并使用 jsGrid 我遇到了问题并且找不到解决方案 我有一个嵌套的 JSON 数据 它是通过组合多个数据库表记录创建的 这是我的 JSON count 3 results personnel
  • 错误:模块“html”不提供视图引擎(Express)

    我正在尝试设置一个简单的路由应用程序 但在渲染页面时不断遇到错误 Error Module html does not provide a view engine 奇怪的是我已经在 app js 文件中指定了视图引擎 但仍然收到错误 app
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • Angular 2:使用正则表达式进行数字验证

    我正在尝试验证 IE 11 中的数字字段

随机推荐

  • Subversion:暂存文件以显式提交?

    我已经非常习惯 git 的方式 即必须接触要提交的每个文件 并且在执行此操作时仔细检查差异 现在在工作中我必须使用 svn 并且我总是不小心提交一些东西 有没有办法让 subversion 的行为像 git 一样 因为我必须明确告诉每个文件
  • Bash,在包含子目录的目录中的每个 .jpg 文件上运行脚本

    我有一些工作代码 它非常简单 它复制每个 jpg 文件 将其重命名为 1 jpg 不用担心 for i in jpg do cp i i jpg 1 jpg done 我如何运行它 以便它适用于目录中的每个文件 该目录的子目录中的每个文件
  • Python TDD 目录结构

    Python 中是否有用于 TDD 的特定目录结构 教程讨论测试的内容 但不讨论测试的位置 通过研究 Python Koans 怀疑它是这样的 project main program py This has main method sta
  • window.open 未应用给定的高度参数

    我在链接上有一个 onclick 事件 其中执行了 url 的 window open 我还为其提供了自定义宽度和高度 但不接受它 并且弹出窗口以不同的宽度和高度显示 有人可以指导吗我这一定是哪里出了问题 我的 window open 语法
  • 如何禁用 Symfony 2 分析器栏?

    它没有添加任何内容 而且使页面变慢 我希望它消失 别问 网站上几乎没有关于探查器的信息 应用程序配置中也没有任何内容 这个设置是在app config config dev yml web profiler toolbar true int
  • 绑定到外部库中基本方法的方法无法处理“之间”的新虚拟方法

    假设我有一个库 版本 1 0 0 包含以下内容 public class Class1 public virtual void Test Console WriteLine Library Class1 Test Console Write
  • 为什么 min() (或 max())不能处理无单位的 0?

    我四处寻找这个问题的答案 但找不到任何有用的信息 我正在尝试设置topCSS 中元素的属性max 0 120vh 271px 我尝试过几种变体 top max 0 120vh 271px top max 0 120vh 271px top
  • MongoDB GridFS - 是文件名还是文件名

    请看下图 来自http mongoexplorer com http mongoexplorer com 我一直在尝试通过 GridFS 进行工作 参考https github com jamescarr nodejs mongodb st
  • 如何防止LRU缓存android中的内存不足错误

    我在我的 Android 应用程序中使用内存 LRU 缓存来缓存位图 但是在将某些位图加载到 LRU 映射中后 应用程序强制关闭并提示内存不足异常 我花了一整天的时间 但还没有找到解决方案 请任何人都可以帮助我 我严重陷入这个问题 提前致谢
  • 使 .jmx 文件在 Windows 10 上使用 jmeter GUI 默认打开(双击文件)

    当我双击它时 我试图让我的 Windows 10 使用 jmeter GUI 打开 jmx 文件 我使用 apache jmeter 3 2 目前 为了打开 jmx 文件 我打开 jmeter jar apache jmeter 3 2 b
  • OledbConnection.Dispose() 是否关闭连接? [复制]

    这个问题在这里已经有答案了 可能的重复 如果使用 using 子句 是否需要关闭 DbConnection https stackoverflow com questions 12033998 is there any need to cl
  • JavaScript 节点列表

    有没有办法连接 2 个 document getElementsByTagName 调用返回的 2 个 NodeList 比如说 我有以下代码 var inputs documentElement getElementsByTagName
  • 上传文件最安全的方法是什么?

    我工作的公司最近在我们托管的网站上遭受了许多标头注入和文件上传漏洞攻击 虽然我们已经解决了标头注入攻击的问题 但我们尚未控制上传漏洞 我正在尝试设置一系列即插即用类型的上传脚本以供内部使用 设计人员可以将其复制到其网站的结构中 修改一些变量
  • ViewPager 中的 PagerTabStrip 位置

    我有以下代码
  • 当节点扩展时增加d3中的连接链路长度

    我正在 d3 中研究可折叠力布局 我面临的问题是 当单击节点时 我需要增加节点之间链接的长度 以保持子节点之间的链接距离相同 当分析扩展时 如何增加分析和耀斑之间的距离 保持与子级的距离较小 是的 您可以通过定义一个函数来做到这一点力 链接
  • 如何设置该正则表达式的最大长度?

    此验证对于允许字母数字字符 空格和破折号非常有效 但我无法将最大长度设置为 23 正则表达式 w s s w s w 0 23 我需要通过的案例 温斯顿1 塞勒姆6 温斯顿塞勒姆 温斯顿塞勒姆 1 two3 带空格的word2 我需要失败的
  • 如何使用 GWT 2.4 在服务器端动态创建 UI

    我正在尝试使用 Google Web Toolkit v2 4 创建用户界面 由于多种原因 我需要在运行时指定服务器上接口的内容 我的意思不仅仅是按钮需要动态标签等 而是整个 UI 需要在运行时创建 我的大部分 UI 都可以指定为直接的 H
  • Phonegap - 自动包含正确的科尔多瓦

    我正在 iOS 和 Android 上开发一个 PhoneGap 应用程序 并使用 git 控制我的 www 目录版本 我知道我的 HTML 文件需要包含正确的 Cordova js 文件 取决于我当前正在开发的平台 当有人在 Androi
  • MDI 窗体中的子窗口对接

    我有一个 MDI 表单和其中的一些子表单 我将子窗体停靠到 MDI 窗口的不同区域 但是当任何子窗体失去焦点时 其他停靠的窗体将重新排列 由于混乱 我准备了一组图像来展示该行为 Image1 单击任何窗口之前 Image2 点击窗口2后 问
  • Google Map API V3 - 单击标记以叠加形式显示更多信息内容(如 Google 地图中一样)

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