如何使用 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 将地理位置和多个标记结合起来? 的相关文章

  • Javascript 函数查找数字的倍数

    创建一个名为的函数multiplesOf 它将接受两个参数 第一个参数是数字数组 第二个参数是数字 该函数应返回一个新数组 该数组由参数数组中的每个数字组成 该数字是参数数字的倍数 So multiplesOf 5 6 7 8 9 10 3
  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • 渲染货币和符号并与来自不同单元格的数据相结合

    我正在使用最新的 jQuery DataTables v1 10 7 我正在尝试将数字解析为以下格式 239 90 USD 我可以使用此命令使货币正常工作 columns data Price render fn dataTable ren
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 是否可以从外部 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