用于在Google Maps v3上创建多个路线的阵列
在Google Maps v3中，可以使用Polyline API来创建多个路线。Polyline是一种在地图上绘制线条的方法，可以用来表示道路、航线或其他路径。要在Google Maps v3上创建多个路线，可以使用以下步骤：
- 首先，需要在HTML文件中加载Google Maps JavaScript API，并初始化地图。
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script src="main.js"></script>
</head>
<body onload="initMap()">
<div id="map" style="width: 100%; height: 100%"></div>
</body>
</html>- 在JavaScript文件中，定义一个函数来初始化地图，并设置地图的中心点和缩放级别。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 40.730610, lng: -73.935242 }
});
}- 定义一个函数来创建Polyline。该函数需要接收一个包含路线坐标的数组，并使用Polyline API在地图上绘制路线。
function createPolyline(map, path) {
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}- 定义一个包含多个路线的数组，每个路线都包含一个包含坐标的数组。
var routes = [
[
{ lat: 40.730610, lng: -73.935242 },
{ lat: 40.745213, lng: -73.985242 }
],
[
{ lat: 40.710610, lng: -73.935242 },
{ lat: 40.725213, lng: -73.985242 }
]
];- 在地图初始化完成后，遍历路线数组，并调用createPolyline函数在地图上绘制每个路线。
for (var i = 0; i< routes.length; i++) {
createPolyline(map, routes[i]);
}这样，就可以在Google Maps v3上创建多个路线了。注意，在实际应用中，需要根据具体需求来定义路线和坐标。
相关·内容
1回答
如何在google地图的标记之间画一条线
javascript、mysql、google-maps、google-maps-api-2
我有一个谷歌地图，我必须显示从数据库到谷歌地图的数据。我已经做到了这一点，我从mysql数据库中提取数据到谷歌map.All的城市正在从数据库中填充，现在我必须画一条线之间的城市，我是从数据库填充。以下是我到目前为止所做的代码。baseIcon.infoWindowAnchor=new GPoint(6,6);
var pinIcon = new GIcon(baseIcon, "http://maps.google.co.
浏览 7提问于2013-10-10得票数 0
2回答
什么是谷歌地图V3中的openInfoWindowHtml和GPolygon
google-maps、google-maps-api-3
polylines[0],"#FFFFFF", 1, 1.0, color,opacity);
polygon.heat = this.heat;
google.maps.event.addListener
浏览 2提问于2010-07-17得票数 4
回答已采纳
1回答
使用Android Studio在Android上启用GPS导航
google-maps、android-studio、navigation、gps
我想使用Tun by Turn语音导航功能，在我的android应用程序的谷歌地图应用程序上，我搜索了很多次，但找不到答案，我已经使用谷歌地图方向API来创建从当前位置到用户目的地的路径，这是应用程序帮助用户导航的想法的一部分
浏览 0提问于2016-03-13得票数 0
2回答
android谷歌地图中的路径标记
javascript、android、google-maps、google-maps-api-3、google-maps-markers
如何使用谷歌地图在android中添加自定义路由。我正在构建一个类似于地图旅行的应用程序。在Maps V3中有可能吗？
浏览 0提问于2013-08-13得票数 0
回答已采纳
1回答
v3 -点击链接从标记绘制路径
javascript、google-maps、google-maps-api-3、directions、driving-directions
我现在有一个简单的Google，使用API v3，在网页上显示一个自定义标记(PNG文件)：
var CustomMarker = new google.maps.
浏览 0提问于2014-08-19得票数 2
回答已采纳
4回答
在安卓应用程序中使用谷歌地图v2或v3？
android、google-maps-api-3
我正在做一个android上的导游系统的项目。我想在我的应用程序中包含谷歌地图，并想知道是使用谷歌地图API v3还是v2？此外，我找不到任何教程告诉我如何包含v3。任何帮助都将不胜感激。谢谢
浏览 1提问于2013-07-20得票数 8
回答已采纳
1回答
显示路线中的多个路点
google-maps、google-maps-api-3
需要在谷歌地图V3的帮助，我想显示路线中的多个点。目前我已经提到了起点和目的地，但是如何显示我在航点(arrWaypoints)数组中的所有点呢？下面是我的代码。origin: origin, travelMode: google.maps.DirectionsTravelMode.DR
浏览 1提问于2013-04-26得票数 0
1回答
如何将Google Earth功能集成到Flex中？
javascript、apache-flex、google-earth
我已经成功地使用ExternalInterface.call("javascriptMethodName")方法将Google earth与Flex相集成，并将javascript内容写入嵌入swf文件的<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=I_Put_my_Key_Here&qu
浏览 0提问于2010-12-18得票数 0
回答已采纳
1回答
检测路径上是否放置了google地图标记
google-maps、google-maps-api-3
是否可以检测到我使用Google Maps API V3创建的路线中间是否放置了标记？
浏览 0提问于2012-12-15得票数 0
回答已采纳
2回答
谷歌地图JavaScript应用编程接口v3 25,000使用限制
google-maps、google-maps-api-3
Google Maps API v3上的每天25,000地图负载使用限制是否适用于JavaScript密钥或使用它的网站？这里有一个场景:开发者拥有API密钥，为多个客户端创建多个网站，每个网站都有自己的域名。这些网站可以在单个服务器上共享(相同的IP)。调用Maps API的代码在客户端(<
浏览 1提问于2014-03-16得票数 4
2回答
使用Javascript API v3将有效的Google Streetview区域显示为地图上的图层
google-maps、google-maps-api-3
我正在开发一个使用Google Maps javascript API v3的Javascript web应用程序。地图允许用户做的一件事是沿着街道绘制路线。然而，我希望用户能够沿着街景的街道绘制路线，我遇到了一个小问题……
在地图对象上拖动黄色街景人时，所有有效的街景街道将以蓝色亮起。但是，有时这些街道与实际地图不能正确对齐，而有时地图上的街道并未显示为街道视图。我的</
浏览 0提问于2012-08-03得票数 13
2回答
从Google Maps URL中提取DirectionsResult
javascript、google-maps、google-maps-api-3
我正在制作一个(新版本的)工具，可以将谷歌地图中的方向转换为GPX文件。测试版本的效果相当不错:它使用Google Maps Javascript API (v3)在网站上嵌入地图，您可以使用与在Google地图主页上相同的方法创建您的路线。然而，这个站点的一个(可能是常见的)用例(以及之前的版本在谷歌之前<e
浏览 0提问于2012-08-10得票数 0
6回答
Google Maps API V3 :如何显示从点A到点B的方向(蓝线)？
google-maps、google-maps-api-3
我有2个点的数据库纬度和经度，我想我的谷歌地图显示从点A到点B的路线…
如何在地图上绘制方向线？
浏览 1提问于2011-05-11得票数 74
回答已采纳
2回答
偏移谷歌地图DirectionsService折线
google-maps-api-3
我在谷歌地图应用程序接口v3方向服务上绘制了两条折线。有没有办法稍微偏移每一行？busRoute2(source,destination){
// show route
浏览 1提问于2012-08-04得票数 0
1回答
谷歌地图v2 to v3:路线图getTile()为什么不起作用？
google-maps-api-3
为什么这种类似v2的结构在v3中不起作用？(相反，路线图瓦片路径未定义) getTileUrl: function(tile, zoom) {):
url = map.mapTypes.get(google.maps.MapTypeId.ROADMAP).getTile(tile, zoom); // why it doesn&#
浏览 2提问于2011-10-30得票数 0
回答已采纳
2回答
无法添加避免高速公路，收费在谷歌地图的网址。
android、google-maps、google-maps-api-3
我想在我的应用程序中添加谷歌地图的两个功能，但我不想嵌入Google方向API。他们在这里
避开公路、收费和渡轮。
浏览 0提问于2018-02-12得票数 1
回答已采纳
9回答
Google版本差异
android、google-maps、google-maps-api-3、routes、google-directions-api
我试图显示两个地方之间的路线，我想使用作为两点之间的路由步骤。
http://maps.google.com/maps?，在这两种情况下，我使用的都是相同的源和目的地，但是结果在Google Map上给出了不同的行为：
http://maps.googleapis.co
浏览 10提问于2012-07-04得票数 18
回答已采纳
1回答
使用来自php数组的多个标记的Google地图
google-maps-api-3
您好，我有一个城市阵列，并希望创建一个google地图使用javascript api v3。当页面加载时，地图会跳转到每个标记。此外，即使我设置了高度和宽度，地图也会变得非常小.Here是我用于生成地图的代码var geocoder;var timeout = 600; var latlng = new google.maps.LatLng(-
浏览 0提问于2011-11-17得票数 1
回答已采纳
3回答
谷歌地图-绘制多个纬度经度对之间的线和距离(如乌鸦飞翔)
google-maps、map、google-maps-api-3
我希望通过多纬度经度对在地图上绘制一条“乌鸦飞翔”的路线。我还需要计算总距离(最好是点之间的距离)。我找到了这个示例，但它比我需要的复杂得多-我不需要任何类型的搜索功能，因为我已经有了我的纬度经度数据。但是，它显示路径的方式正是我想要实现的
有没有更简单的例子可供我参考，或者有什么通用的指导来实现这一点？
浏览 2提问于2011-03-11得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
