Google 地图 v3 创建两点之间的路线

2024-04-17

我正在使用 Google Maps API 开发网络应用程序。我正在尝试在两点之间创建一条路线,但由于某种原因我还没有弄清楚如何创建它。以下是我的代码,如果我缺少什么,请告诉我。谢谢。

<script>
var Center=new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
    center:Center,
    zoom:20,
    mapTypeId:google.maps.MapTypeId.SATELLITE
};

map=new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);

var marker=new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});

marker.setMap(map);

}

function Route() {

var start = new google.maps.LatLng(18.210885,-67.140884);
var end =new google.maps.latLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
 };
 directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
}
});
} 

google.maps.event.addDomListener(window,'load',initialize);
</script>

如果我满足以下条件,它对我有用:

  1. 调用路由函数
  2. change:

    var end =new google.maps.latLng(18.211685,-67.141684);
    

to:

    var end =new google.maps.LatLng(18.211685,-67.141684);

(javascript区分大小写,浏览器在javascript控制台报错)

工作版本 http://www.geocodezip.com/v3_simpleMap_directions.html

代码片段:

var Center = new google.maps.LatLng(18.210885, -67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var properties = {
    center: Center,
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById("map"), properties);
  directionsDisplay.setMap(map);

  var marker = new google.maps.Marker({
    position: Center,
    animation: google.maps.Animation.BOUNCE,
  });

  marker.setMap(map);
  Route();
}

function Route() {

  var start = new google.maps.LatLng(18.210885, -67.140884);
  var end = new google.maps.LatLng(18.211685, -67.141684);
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.WALKING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    } else {
      alert("couldn't get directions:" + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google 地图 v3 创建两点之间的路线 的相关文章

随机推荐

  • 如何使用 Linux 帧缓冲区旋转 Qt5 应用程序?

    我有一个直接在 Linux 帧缓冲区 无 x Windows 上运行的嵌入式 Linux 应用程序 现在我们必须将显示屏物理旋转 180 度 如何让我的 Qt 应用程序旋转 使其不会出现颠倒 我看到参考使用以下选项 platform lin
  • 如何解决 ORA-00911: 无效字符错误?

    我试图执行一个SQL INSERT with Toad for oracle INSERT INTO GRAT ACTIVITY UUID IP ADRESS SEND MAIL DATE CREA DATE UPD CREATOR CEN
  • 在 pandas 数据帧上运行 sql 查询

    我有一个数据框 df ID Price Region 1 23 AUS 1 45 DXB 2 25 GER 2 18 TUN 我想用 python 编写代码以获得以下输出 ID Price Region 1 45 DXB 2 25 TUN
  • JTextArea 中控制字符的 Java 图像

    我正在编写一个由 2 个面板组成的应用程序 一个 JTextArea 用于输入文本 另一个用于显示文本 In these texts I have two special characters namely STX ETX 0x02 0x0
  • 如何纠正箱线图的标签,获取 R 中每对的 p 值

    我有一个数据样本如下 df lt tribble capacity1 capacity2 capacity3 capacity4 capacity5 capacity6 capacity7 capapcity8 75 88 85 71 98
  • XCode 8:找不到 AFNetworking 头文件和 Swift Pod 错误

    今天我把 XCode 升级到了 8 版本 但是之后我遇到了很多错误 前任 目标 Charts 和 CircleProgressView 包含使用早期版本的 Swift 开发的源代码 选择 转换 将这些目标中的源代码更新为 最新的 SDK 您
  • 代码适用于嵌入式 Apache Tomcat 8,但不适用于 9。发生了什么变化?

    将 Apache Tomcat 嵌入到 Eclipse Web 应用程序项目中 当我使用最新的 Tomcat 8 8 0 5 Embedded jar 作为依赖项时 该代码可以工作 并且该服务器响应于http 本地主机 8080 http
  • Java、巴拿马项目以及如何处理 Hunspell“建议”结果

    我正在尝试Hunspell https github com hunspell hunspell以及如何使用它与之交互巴拿马 Java 项目 https jdk java net panama 构建 19 巴拿马 1 13 2022 年 1
  • 如何在 Jackson 中禁用fail_on_empty_beans?

    使用 jackson 2 1 如何禁用fail on empty beans错误消息似乎要我禁用 我假设这只是世界上最简单的事情 但是现在已经晚了 我还没有找到一个简单的教程或任何特别明显的东西api SerializationFactor
  • 如何使用 PHP API [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有一个非常简单的 API 位于htt
  • 使用 Owin 从 JWT 获取自定义声明

    我使用 Owin 和 JWTBearerAuthentication 来授权用户并验证他们的令牌 我这样做是这样的 public class Startup public void Configuration IAppBuilder app
  • python setattr 用于带有装饰器的动态方法创建器

    我有一个定义了多个方法的类 import mat class Klass object mat sell mat CanSet def method1 self return None mat sell mat CanSet def met
  • 64 位定点乘法错误

    我正在 C 中实现一个 64 位定点有符号 31 32 数字类型 基于long 到目前为止 加法和减法都很顺利 然而 乘法有一个我正在尝试解决的恼人的情况 我当前的算法包括将每个操作数分为最高和最低有效 32 位 执行 4 次乘法分为 4
  • 资产管道升级导致 Paperclip 中的 Default_url 损坏

    我正在使用 Paperclip 并且我的附件之一有一个像这样的 default url 选项 default url gt images missing style png 由于目录已移动 资产管道显然不喜欢这样 处理这个问题的最佳方法是什
  • Spring MVC 控制器是单例吗?

    我有一个关于Spring 3 MVC Controllers 当请求到来时 容器是否为每个请求创建一个新的控制器实例 类似于Action在 Struts 2 中 ThreadLocalActionContext 还是单个实例响应所有请求 默
  • 从 F# 中存储为概率序列的离散分布函数中抽取随机数

    存在给定的有限长度 N 的浮点序列 介于 0 和 1 之间 表示整数 0 N 1 上的分布函数 我们试图从这个分布中抽取一个随机数 一种方法是在 0 1 浮点数 中绘制一个均匀随机变量 然后计算该数字的逆累积分布函数 如果分布在数组中 则代
  • 带有下划线的牛顿驼峰命名法问题

    我注意到 当我序列化具有 HTTP VERB 键的 C 字典时 它会变成httP VERB在 JSON 结构中而不是 hTTP VERB 或 http verb 我希望驼峰式大小写能够实现 这是我用来重现该问题的代码 class Progr
  • Jfreechart垂直线模糊

    I am using JFreechart to generate some plots and I found the lines in my plot is blurry but the demo shows that all the
  • 我的朋友可以使用我的本地 git 存储库作为他的远程存储库吗?

    我的计算机上有一个本地 git 存储库 有没有可能我的朋友将他的上游设置为我计算机上的本地存储库 而我的本地存储库成为他的远程存储库 所以他将能够从我的本地存储库获取最新的更改并推送到我的本地存储库 我不想使用类似的工具github or
  • Google 地图 v3 创建两点之间的路线

    我正在使用 Google Maps API 开发网络应用程序 我正在尝试在两点之间创建一条路线 但由于某种原因我还没有弄清楚如何创建它 以下是我的代码 如果我缺少什么 请告诉我 谢谢