Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Google Maps API自定义标记动画和路径方向

Google Maps API自定义标记动画和路径方向
EN

Stack Overflow用户
提问于 2015-07-22 18:01:36
回答 1查看 4K关注 0票数 0

我正在尝试创建一个Google地图应用程序,它以直线显示从源到目的地的路线(如乌鸦飞翔)。我有一个通用的应用程序在工作。我可以输入一个起点和一个终点,它会慢慢地从起点到终点画一条线。另外,我有一个通用的标记,从开始到结束沿着直线路线移动。我想做的是用自定义绘制的标记替换通用标记。此外,我希望自定义标记的方向,使其符合路线。换句话说,如果自定义标记是一辆汽车,我希望汽车在沿着路线行驶时朝向正确的方向。

我看到了这个演示,但我不确定他们是如何做到的。http://www.morethanamap.com/demos/visualization/flights

有什么建议吗?

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2015-07-23 00:14:47

您需要为多段线设置IconSequence。IconSequence需要一个符号,例如-用于汽车的SVG:https://upload.wikimedia.org/wikipedia/commons/f/f6/Car.svgPypaertv)

演示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function initialize() {


  var origin = new google.maps.LatLng(39.904211, 116.407394),
    destination = new google.maps.LatLng(40.4167754, -3.703790),
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: origin,
      zoom: 3
    }),
    line = new google.maps.Polyline({
      geodesic: true,
      path: [origin, origin],
      icons: [{
        icon: {
          path: 'M 236.54427,9.8485 C 220.2445,9.8485 204.45277,15.405415 191.41289,25.550223 L 97.337229,97.995127 L -135.0706,131.12201 C -150.90459,133.65817 -161.13586,149.44963 -156.32358,165.14237 L -132.57022,244.60846 L -86.188678,244.60846 C -90.823109,289.62242 -60.00389,319.2235 -20.679452,319.2235 C 18.644986,319.2235 49.844083,285.73585 44.829779,244.60846 L 425.19586,244.60846 C 419.65783,289.49008 452.23789,319.2235 490.70508,319.2235 C 529.17227,319.2235 561.22444,285.70267 556.21433,244.60846 L 651.04018,244.60846 C 659.88863,244.60846 667.48002,236.98237 667.48,227.63005 L 667.48,137.76012 C 667.48,129.20037 661.30023,122.08284 653.22799,120.97335 L 491.76774,97.995127 L 427.82125,32.635149 C 413.84999,18.051989 394.74442,10.165524 374.56372,9.8485 L 236.54427,9.8485 z M 304.42883,37.42226 L 378.62679,37.42226 C 389.64854,37.42226 399.73373,43.261111 405.94316,52.613356 L 424.25825,80.825395 C 428.78955,88.722668 423.85522,96.409133 415.38198,97.803717 L 304.42883,97.803717 L 304.42883,37.42226 z M 224.60508,37.549916 L 283.42586,37.549916 L 283.42586,97.803717 L 132.59212,97.803717 L 200.10167,45.97523 C 207.08728,40.585799 215.91189,37.549914 224.60508,37.549916 z',
          scale: .05,
          fillColor: 'blue',
          fillOpacity: 1,
          rotation: 90,
          anchor: new google.maps.Point(0, 200)
        },

        offset: '100%'
      }]
    }),

    pct = 0,
    timer = setInterval(function() {

      pct += .002;

      line.setPath([origin, google.maps.geometry.spherical.interpolate(origin, destination, pct)]);
      line.setMap(map);
      map.setCenter(line.getPath().getAt(1));
      if (pct >= 1) clearInterval(timer)
    }, 50);




}

google.maps.event.addDomListener(window, 'load', initialize);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31570678

复制
相关文章
用Shell脚本过滤Hadoop中不能访问的节点
最近使用的一个集群hp1,因为维护集群的人不给力,节点总是过一段时间就掉一两个。今天发现重启Hadoop时,HDFS已经进入保护模式了。
星哥玩云
2022/07/03
8730
为什么在静态方法中不能使用this
在JVM的运行时数据区中有个虚拟机栈(或Java栈),在它的里面是由栈帧'叠加'而成.栈帧由局部变量表,操作数栈,动态连接,方法返回地址等组成.
书唐瑞
2022/06/02
1.9K0
为什么在静态方法中不能使用this
禁止/移除 WordPress 4.2 中前台自动加载的 emjo 脚本
如果你更新了WordPress 最新版本的4.2 版本,查看网页源代码你会发现WordPress 会自动在head加载一段用于支持emjo 表情的脚本(JS+CSS),对于大部分人来说,这个是十分鸡肋的功能,反而影响加载速度。 原因分析 脚本就是类似下面的代码: <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":
Jeff
2018/01/22
1.1K0
工作中那些比较,通用的脚本和工具
分享一些工作中常用的脚本工具~ 1,Bag包的合并 2,CallBack的使用 3,#define 中声明类 4,获取当前进程PID 5,C调用shell返回结果 6,根据指定字符分割字符串 7,统计文本文件时间戳 一,rosBag的合并 #!/usr/bin/env python import sys import argparse from fnmatch import fnmatchcase from rosbag import Bag def main(): parser = ar
用户9831583
2022/12/04
5250
面试官:为什么Promise中的错误不能被try/catch?
前言 之前我写过一篇文章,讨论了为什么async await中的错误可以被try catch,而setTimeout等api不能,有小伙伴提出之前面试被面试官问过为什么Promise的错误不能try catch,为什么要这么设计。好吧,虽然Promise这个话题大家都聊烂了,今天我们再来展开聊聊🤭。 什么是Promise Promise是一个用来代表异步操作结果的对象,我们可以通过观察者模式观察异步操作的结果。在其它语言里面,我们多多少少接触过future,deferred这些概念,Promise其实就是J
写代码的阿宗
2023/01/11
1.6K0
在vue的v-for中,key为什么不能用index?
在前端中,主要涉及的基本上就是 DOM的相关操作 和 JS,我们都知道 DOM 操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的 DOM 操作便成了前端优化的重要内容。
bb_xiaxia1998
2022/10/01
1.1K0
Java基础-Java中为什么字段不能被重写
先让我们看一下下面这个例子,新建两个Sub对象,一个指向Sub类型的引用,一个指向 Super类型的引用。
cwl_java
2020/03/19
5370
OGG的PURGEOLDEXTRACTS不能工作问题的解决
PURGEOLDEXTRACTS /ogg/dirdat/horcl/hz*,USECHECKPOINTS,MINKEEPDAYS 2
星哥玩云
2022/08/17
8400
某省自考报名系统免排队直接登录报名脚本
最近在群里看到好多人说四川省自考报名网站炸了,然后升级了之后好像今天又重新开放了,看到了一个排队99999人的图,然后还有个别在群里叫嚣代自考报名,收费5-20元不等,并且还包代报成功,于是这里绝对有猫腻,所以进行了一个简单的研究,看了下网页代码和js代码,发现只是把登录界面做了隐藏,于是分享给大家。
Lcry
2022/11/29
1K0
某省自考报名系统免排队直接登录报名脚本
在vue的v-for中,key为什么不能用index?4
在前端中,主要涉及的基本上就是 DOM的相关操作 和 JS,我们都知道 DOM 操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的 DOM 操作便成了前端优化的重要内容。
bb_xiaxia1998
2023/01/06
1.1K0
为什么 GROUP BY 之后不能直接引用原表中的列
  标准 SQL 规定,在对表进行聚合查询的时候,只能在 SELECT 子句中写下面 3 种内容:通过 GROUP BY 子句指定的聚合键、聚合函数(SUM 、AVG 等)、常量。我们来看个例子
星哥玩云
2022/08/18
1.7K0
为什么 GROUP BY 之后不能直接引用原表中的列
为什么你写的拦截器中不能注入Java bean?
在Spring Boot项目中,拦截器经常被用来做登陆验证,日志记录等操作。拦截器是Spring提供的,所以可以将拦截器注成bean,由IOC容器来管理。实现拦截器的方式很简单,主要由以下两个步骤:
Java旅途
2020/11/25
9700
为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作?
现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。 Redux 先从Redux的设计层面来解释为什么Reducer必须是纯函数
刘嘿哈
2022/10/25
2.8K0
2729: [HNOI2012]排队
2729: [HNOI2012]排队 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 957  Solved: 449 [Submit][Status] Description 某中学有 n 名男同学,m 名女同学和两名老师要排队参加体检。他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不同的) Input 只有一行且为用空格隔开的两个非负整数 n 和 m,其含义如上所述。 对于 30%的数据
HansBug
2018/04/10
5800
排队论[通俗易懂]
**µ代表单位时间服务人的个数 ** 判断模型是否稳定,一般用比较λ和µ的大小(下图的系统服务强度)
全栈程序员站长
2022/09/20
1.5K0
排队论[通俗易懂]
为什么ArrayList集合中不能使用foreach增删改?
编程过程中常常需要使用到集合,而ArrayList也是我们常常使用的,但是最近在一次删除和增加中出现了一些问题,分享记录下。
程序员小猿
2021/01/19
7170
为什么ArrayList集合中不能使用foreach增删改?
为什么ArrayList集合中不能使用foreach增删改?
编程过程中常常需要使用到集合,而ArrayList也是我们常常使用的,但是最近在一次删除和增加中出现了一些问题,分享记录下。
开发者技术前线
2020/11/24
7350
为什么ArrayList集合中不能使用foreach增删改?
排队论模型
我们使用六个符号表示排队模型,在符号之间用斜线隔开,记为 X/Y/Z/A/B/C 。第一个符号 X 表示顾客到达流或顾客到达间隔时间的分布;第二个符号 Y 表示服务时间的分布;第三个符号 Z 表示服务台数目;第四个符号 A 是系统容量限制;第五个符号 B 是顾客源数目;第六个符号 C 表示的是服务规则,例如先到先服务 FCFS, 后到先服务 LCFS 等。
hotarugali
2022/03/01
1.4K0
Java中static的用法,static、public为什么不能修饰局部变量?
其实这些变量都之所以叫局部变量,其作用域也只限于声明它的方法体内。在方法被调用时,这些局部变量获得内存空间,到方法执行结束时,他们所占据的内存空间就被释放。
HaC
2020/12/30
2.8K0
点击加载更多

相似问题

SSLHandShakeException:远程主机在进行GET请求握手时关闭连接

114

SSLHandshakeException:握手过程中远程主机关闭连接

40

SSLHandshakeException:握手过程中远程主机关闭连接;

26

SSLHandshakeException :握手过程中远程主机关闭连接

11

我收到javax.net.ssl.SSLHandshakeException:握手期间远程主机关闭连接

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文