如何使用 javascript 将地理位置和多个标记结合起来?

2024-01-22

我正在尝试创建一个能够跟踪我的位置并同时能够显示多个标记的地图。我可以结合下面的 2 个 JavaScript 吗?如果不知道我应该怎么做?

用于多个标记的 JavaScript

<script type="text/javascript">
  var locations = [
  ['Hougang', 1.37265, 103.893658],
  ['Punggol', 1.400617, 103.907833],
  ['MacRitchie Reservoir', 1.346002, 103.825436],
  ['Bishan', 1.352051, 103.849125],
  ['Sentosa', 1.251226, 103.830757]
];

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(1.37265, 103.893658),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
      });

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
          }
      })(marker, i));
  }

JavaScript 获取当前位置

navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
    }

是的,可以将两者结合起来。当您初始化地图并绘制后港...位置后,您可以添加地理位置代码。我编写了一个演示,它将显示一个较小的绿色图标来表示地理位置。如果浏览器不支持地理编码,则不会显示任何内容,也不会显示任何错误。

DEMO http://jsfiddle.net/yV6xv/7/ http://jsfiddle.net/yV6xv/7/

请记住,如果代码是从硬盘驱动器本地加载的,则地理定位不起作用(至少对我来说)。它必须公开提供。

// Check if user support geo-location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 8,
            center: geolocpoint,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        var geolocation = new google.maps.Marker({
            position: geolocpoint,
            map: map,
            title: 'Your geolocation',
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
    });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 javascript 将地理位置和多个标记结合起来? 的相关文章

  • Oo 任何 IDE 中的 javascript 代码补全

    你知道有什么IDE可以自动完成这种代码吗 我这里有一个 javascript 类生成器 function var core bind function method scope if method instanceof Function t
  • React-native:将场景绑定到导航栏

    我正在整理这个提问 回答应用程序 并遇到了这个障碍 我想从导航栏触发场景中的功能 与登录应用程序类似 我在导航栏中有一个用于提交答案的按钮 RightButton route navigator index navState if rout
  • HTML/VBA Click 事件未触发

    这是我第一次在 StackOverflow 上发布问题 到目前为止 我已经能够通过 VBA 帮助论坛解决我的大部分问题 我的问题很简单 我有一个自动数据拉取 我需要在其中导出数据 我过去曾在这方面取得过成功 但这次略有不同 我尝试单击以生成
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • 如何在ASP.NET Webform中使用Jquery表单插件?

    我遇到了这个插件 http malsup com jquery form getting started http malsup com jquery form getting started 我想知道如何在 ASP NET WebForm
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 是否可以从外部 ExtendScript 执行 JSX 脚本?

    通常 当您编写 jsx 脚本来自动化 Adob e 产品 如 InDesign Illustrator 或 Photoshop 时 您可以从 ExtendScript IDE 编写 调试和执行脚本 是否可以绕过 ExtendScript 并
  • 更新 cloud firestore 文档中的单个地图

    最终更新我从使用基于 andresmijares 的以下答案的事务更改为使用 set 现在我可以将数据写入数据库 var gradeDocRef db collection students doc studentId console lo
  • 数组的 [..] 和 [...] 之间没有区别吗?

    Edit 做了一个 github 问题 https github com jashkenas coffee script issues 3452 issuecomment 40976448 一天后它就被 jashkenas 关闭了 因此 要
  • 如何在 iPhone 的 webview 中打开字符串中的 url

    我只想从我的字符串中打开一个网址 我的字符串已经有我只想显示的网址UIWebView myString http maps google com maps zoom 8 sensor false lci transit layer traf
  • 显示另一个 UIWindow 时出现问题

    我正在编写一个 iPad 应用程序 并且正在尝试显示第二个应用程序UIWindow在我的应用程序的主窗口顶部 我想做的主要事情是创建一个登录窗口 如何使用 UISplitViewController 呈现登录 https stackover
  • 开发者可以通过 WatchKit 获取心率原始数据吗?

    是否可以使用 Apple WatchKit 以及用于心跳 心率数据访问 原始数据访问的 API 来开发第三方应用程序 WatchKit SDK 现在对开发者公开可用吗 心率原始数据信息是现在可用 in Watchkit for watchO
  • 从二进制文件中提取对象并放入 List

    我以前做过这个 但不知道我是怎么做到的 我有一个二进制文件 我想在其中存储对象 我已经序列化了对象类 Serializable 并已成功将各个对象保存到文件中 然而 当尝试读取对象并放入其中时 问题开始出现 List lt gt 以便进一步
  • Wordpress 与 Haml/Sass

    使用过Haml http haml lang com and Sass http sass lang com 对于一些 Rails 副项目 我发现它们极大地加快了我的前端开发速度 然而 我还没有找到像 Wordpress 这样强大或客户熟悉
  • PHP 是面向对象的吗?

    PHP 是面向对象的语言吗 如果没有 那么 CakePHP 框架怎么样 它是 PHP 的面向对象 MVC 实现吗 另外 PHP 应用程序可以完全使用classes叫做面向对象 不 PHP 不是完全面向对象的语言 C 或 Java 也不是 因
  • Python插入变量字符串作为文件名

    我试图在每次脚本运行时创建一个具有唯一文件名的文件 我只想每周或每月这样做 所以我选择使用日期作为文件名 f open s csv wb name 这是我收到此错误的地方 Traceback most recent call last Fi
  • Cocos2D 中的评分系统

    我的游戏有碰撞检测功能 当我的导弹击中敌人时 敌人就会消失 我想添加一个评分系统 每次我的导弹击中敌人时都会增加 1 分 我将在下面发布我的游戏代码 我使用了HelloWorldLayer m 这是代码 Link http pastebin
  • sed 就地标志适用于 Mac (BSD) 和 Linux

    是否有调用sedtodo 无需备份即可在 Linux 和 Mac 上进行就地编辑 虽然 BSDsedOS X 附带的似乎需要sed i GNUsedLinux 发行版通常将引号解释为空输入文件名 而不是备份扩展名 并且需要sed i 反而
  • 如何在Racket中使用TCP?

    我试图从客户端向服务器发送消息 并在服务器上打印该消息 服务器 rkt lang racket define the listener tcp listen 9876 define values in out tcp accept the
  • 检测/解析文本中的邮寄地址

    是否有任何开源 商业库可以检测文本中的邮寄地址 就像 Apple 的邮件应用程序在 Mac iPhone 上为地址添加下划线一样 我一直在网上做一些研究 想法似乎是使用 Google Regex 或完整的 NLP 软件包 例如斯坦福大学的
  • JS改变元素的颜色Onclick未定义的颜色

    我想制作一个颜色更改器按钮 但最后一次单击后 颜色将设置为未定义 知道如何删除它吗 var color Orange Red Green Blue var i 0 document querySelector changeColorBtn
  • 如何让我的 Selenium 测试不那么脆弱?

    我们使用 Selenium 来测试 ASP NET 应用程序的 UI 层 许多测试用例测试跨越多个页面的较长流程 我发现测试非常脆弱 不仅因为实际更改页面的代码更改而被破坏 而且还因为无害的重构而被破坏 例如重命名控件 因为我需要将控件的
  • 使用 webpack 创建 less 包

    我需要使用 webpack 创建一个bundle less 文件 其行为与 less loader exctract 文本插件相同 除了它不应该将 less 编译成 css 而只连接所有必需的 less 文件并内联 less 导入 原因是我
  • Webpack 为项目中的图像创建哈希文件名

    在 client components 文件夹中的组件之一中 我从 public images 文件夹导入三个图像 在某个时刻 webpack 为每个图像创建了一个文件 其散列名称如下 0e8f1e62f0fe5b5e6d78b2d9f41
  • ASP.NET 无法正确处理逗号分隔的 cookie

    根据the RFC http www w3 org Protocols rfc2109 rfc2109 Cookie HTTP 标头中的各个 cookie 可以用逗号和分号分隔 但是 ASP NET 无法正确解析逗号大小写 它不会将逗号视为
  • 如何使用 javascript 将地理位置和多个标记结合起来?

    我正在尝试创建一个能够跟踪我的位置并同时能够显示多个标记的地图 我可以结合下面的 2 个 JavaScript 吗 如果不知道我应该怎么做 用于多个标记的 JavaScript