在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色

2023-12-01

我使用相同的代码http://www.aspsnippets.com/Articles/Google-Maps-V3-Draw-route-line- Between-two-geographic-locations-Cooperatives-Latitude-and-Longitude-points.aspx这里我可以有n个点我正在尝试改变它没有反映的描边颜色

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
            {
                "title": 'Alibaug',
                "lat": '18.641400',
                "lng": '72.872200',
                "description": 'xxxx'
            }
        ,
            {
                "title": 'Mumbai',
                "lat": '18.964700',
                "lng": '72.825800',
                "description": 'yyyy'
            }
        ,
            {
                "title": 'Pune',
                "lat": '18.523600',
                "lng": '73.847800',
                "description": 'zzz'
            }
];
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

            //***********ROUTING****************//

            //Intialize the Path Array
            var path = new google.maps.MVCArray();

            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();

            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: 'red' });



            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                if ((i + 1) < lat_lng.length) {
                    var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                    });
                }
            }
        }
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
</body>
</html>

并将这一行替换为

 var poly = new google.maps.Polyline({ map: map, strokeColor: 'red' });

and i tried to add color using the below code as

var colorVariable = ["white","green","blue","yellow","rose"];



     for(var a =0;a<=5;a++){
            var polyOptions = {
                strokeColor: colorVariable[a],
                strokeOpacity: 1.0,
                strokeWeight: 2
            }
            poly = new google.maps.Polyline({ map: map, strokeColor: polyOptions });
            poly.setMap(map);
        }

但我没有得到不同的颜色笔划，请说明如何集成它有什么问题

一条折线只能有一种颜色，您需要为每种颜色制作一条单独的折线：

function getDirections(src, des, color, map) {
    //Intialize the Direction Service
    var service = new google.maps.DirectionsService();
    service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //Intialize the Path Array
            var path = [];
            for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                path.push(result.routes[0].overview_path[i]);
            }
            //Set the Path Stroke Color
            var polyOptions = {
                strokeColor: color,
                strokeOpacity: 1.0,
                strokeWeight: 2,
                path: path,
                map: map
            }
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);

        }
    });
}

概念证明小提琴

代码片段：

var markers = [{
  "title": 'Alibaug',
  "lat": '18.641400',
  "lng": '72.872200',
  "description": 'xxxx'
}, {
  "title": 'Mumbai',
  "lat": '18.964700',
  "lng": '72.825800',
  "description": 'yyyy'
}, {
  "title": 'Pune',
  "lat": '18.523600',
  "lng": '73.847800',
  "description": 'zzz'
}];
// white is hard to see on the map tiles, removed.
var colorVariable = ["green", "blue", "yellow", "rose"];
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = new Array();
  var latlngbounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });
    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
      });
    })(marker, data);
  }
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  //***********ROUTING****************//



  //Set the Path Stroke Color
  var poly = new google.maps.Polyline({
    map: map,
    strokeColor: 'red'
  });

  //Loop and Draw Path Route between the Points on MAP
  for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      getDirections(src, des, colorVariable[i], map);
    }
  }
}

function getDirections(src, des, color, map) {
  //Intialize the Direction Service
  var service = new google.maps.DirectionsService();
  service.route({
    origin: src,
    destination: des,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Intialize the Path Array
      var path = [];
      for (var i = 0; i < result.routes[0].overview_path.length; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      //Set the Path Stroke Color
      var polyOptions = {
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 2,
        path: path,
        map: map
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

    }
  });
}

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="dvMap"></div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

googlemaps

Colors

googlepolyline

在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色的相关文章

将鼠标悬停时的鼠标光标更改为锚状样式

如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标我怎样才能做到这一点假设你的div has an id myDiv 将以下内容添加到您的 CSS 中这cursor pointer指定光标应与用于锚点超链接的手形图标
如何使用 JavaScript 创建链接？

我有一个标题字符串和一个链接字符串我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接任何帮助表示赞赏我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表我想将标题链接到 URL 以使
Three.js：缩放几何图形后错误的 BoundingBox

在我的场景中我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

我正在尝试将新的 Google 协作平台用于我开发的网页但是我在存储本地数据时遇到了问题本地文件在 Windows 和 Apple safari chrome 中运行良好从 Google 协作平台尝试一下没有什么乐趣此外在 s
Chrome 中的性能问题

我目前正在从事一个相对较大的项目使用 AngularJs 构建应用程序的一部分是一个表单您可以向其中添加任意数量的页面不幸的是添加了很多不必要的垃圾即表示表单模型的对象可能会变得非常大在某些时候 Chrome 基本上无法处理它
如何使用javascript将大图像转换为十六进制？

如果我尝试将图像转换为十六进制无论我使用哪个函数我都会收到此错误消息该图像的大小为 7 MB 19812 毫秒清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
摩卡 - Chai Karma“套件未定义”

我对 jscript tdd 很陌生遇到了问题希望有人能告诉我我在做什么在浏览器中运行测试通过 HTML 文件一切正常通过节点和业力运行它们我得到以下异常我想在 node js 主机的 karma 中使用 Mocha 和 Ch
带有淘汰赛js的隐形recaptcha

我正在完成隐形验证码但我在实现它时遇到问题谷歌开发人员页面中的代码显示它应该是这样的
可以在初始 DOM 解析期间/之前修改 DOM 吗？

是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互更具体地说是否有可能阻止 DOM 中的脚本元素使用用户脚本内容脚本或 Chrome 或 Firefox 中的类似脚本运行在解
Draggable JS Bootstrap 模式 - 性能问题

对于工作中的项目我们在 JavaScript 中使用 Bootstrap Modal 窗口我们想让一些窗口可移动但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
防止 iOS 键盘在 cordova 3.5 中滚动页面

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

嘿朋友们我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息但是我收到此错误friendId split 不是函数这是我的代码 function recommendToFr
为什么我们在打字稿中使用 HTMLInputElement ？

我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
Three.js 各种大小的粒子

我是 Three js 的新手正在尝试找出添加 1000 个粒子的最佳方法每个粒子都有不同的大小和颜色每个粒子的纹理是通过绘制画布创建的通过使用粒子系统所有粒子都具有相同的颜色和大小为每个粒子创建一个粒子系统是非常低效的有没有
Vue 和 Vuex：处理依赖的计算属性

我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象每个Table有一个包含多个
对于只触及我的工作表的 Google 表格脚本，收到“此应用程序未经验证”

我正在编写一个 Google Sheets 脚本我只想访问与 gs 文件关联的同一电子表格中的数据似乎我应该有权在自己的电子表格中运行脚本但是每当我运行一个函数时我都会得到一个This app isn t verified信息我该
在 Javascript 中连接空数组

我正在浏览一些代码我想知道这有什么用处 grid push concat row 根据我的理解它等同于 grid push row 为什么要大惊小怪连接你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时例如 va
用于交互式图形绘制的轻量级 JavaScript 库？ [关闭]

Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库我掌握的数据主要是与海洋研究相关的科学数据我知道一些 jquery
如何使用asm.js进行测试和开发？

最近我读到asm js规范看起来很酷但是是否有任何环境工具来开发和测试这个工具这还只是处于规范阶段吗您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它有关 asm js 的链接
Vue.js[vuex] 如何从突变中调度？

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

随机推荐

如何在 Windows 窗体中隐藏组合框中的特定项目

如何从组合框中隐藏特定数量的项目下面的代码将隐藏所有项目我找不到执行此操作的方法 string taskSelection taskSelectionComboBox Text string stateOfChild stateOfCh
MongoDB C# 驱动程序投影 $elemMatch $

我正在尝试将此查询从基于文本的过滤器转换为基于表达式的过滤器查询部分没问题但我在投影方面遇到问题 state transfer attempts 1 Project 的 Expression 等价物是什么提前致谢 db Items f
如何在 ModelSerializer 中添加自定义字段？

我创建了一个ModelSerializer并想要添加一个不属于我的模型的自定义字段我找到了添加额外字段的描述here我尝试了以下方法 customField CharField source my field 当我添加此字段并调用我的va
Android Studio TransformException：错误：任务“：app：transformClassesWithDexForDebug”执行失败

当我尝试使用 Android Studio 运行应用程序时出现以下异常错误任务 app transformClassesWithDexForDebug 执行失败 com android build api transform Tran
Facebook 画布 url 带有参数？

我有一个网站我在其中使用 Facebook API 让用户邀请他们的朋友访问我的网站这些朋友将在他们的 Facebook 上收到应用程序邀请一旦他们点击并接受它它就会在 iFrame 中在 Facebook 内打开我网站的页
.htaccess-SetEnvIf 到 NGinx-fastcgi_param 转换

我的 Apache 网站有以下 htaccess 设置现在我将其移至 Nginx 因此我想知道如何将 htaccess 文件中的 SetEnvIf 参数放入 Nginx 配置中我认为是通过设置 fastcgi param 来实现的请帮
如何对 Postgresql 数组进行 JPA 查询？

如何使用 text 列查询 Postgresql 表的模型 TypeDefs TypeDef name string array typeClass StringArrayType class Entity Table name names
为什么 Automapper.ProjectTo() 抛出空引用异常？

我有一个映射 var config new MapperConfiguration cfg gt cfg CreateMap
如何在 JavaScript 中指定 Math.log() 的基数？

我需要一个logJavaScript 的函数但它需要以 10 为基数我看不到任何列表所以我假设这是不可能的有没有数学奇才知道这个问题的解决方案改变基础公式身份可以计算以10为底的对数的数值具有以下身份 Since Math
使用 ggplot2 在一个图上绘制多个箱线图

当我使用以下代码时标准 R 绘图会在一张图中生成 30 个箱线图 boxplot Abundance Quartile 1 Year Quartile 1 col LightBlue main Quartile1 Rare 我想在 ggp
numpy.bitwise_and.reduce 行为异常？

The ufunc reduce因为 numpy bitwise and reduce 似乎表现不正常我是否滥用了它 gt gt gt import numpy as np gt gt gt x 0x211f 0x1013 0x1111
使用非默认端口在 Paramiko 中设置 SFTP 服务器主机公钥

我试图在建立连接之前设置已知的主机公钥我尝试使用合作伙伴与我共享的公钥文件但无法连接所以现在我尝试添加服务器返回的密钥这是我正在执行的步骤 1 从主机获取密钥 from io import StringIO import param
如何强制传单地图重新加载所有图块（包括可见图块）？

我正在开发一个图形网络应用程序我决定传单将成为一个不错的图形视图我让它显示某种程度但我需要一种方法来强制它在用户输入新公式进行绘制时更新我也在使用 JQuery 但这应该不重要这是相关代码 function formulaCha
如何以编程方式向 AppleWatch 添加标签？

我是 Apple Watch 开发新手但我发现无法以编程方式向 Apple Watch 屏幕添加标签或按钮我所能做的就是通过故事板添加资产我可以问如何以编程方式向屏幕添加标签或按钮吗以及如何将它们的位置设置为屏幕上的x和y 首选
jscript - 获取目录中的文件列表

这看起来应该很容易我以前从未使用过 JScript 我正在查看 microsoft 提供的 JScript api 但没有运气这是我所拥有的 var fso tf fso new ActiveXObject Scripting File
如何使用缓存避免不必要的 Firestore 读取

我有一个按日期排序的旅行数据列表大集现有行为我将所有行程数据存储到 SqlLite Db 中对于添加的每个新数据我都会收到 fcm 通知并且使用上次更新时间概念仅同步新添加的数据这样当客户打开应用程序时他将始终从我的数据库
通过 Spring 进行 RESTful 身份验证

Problem 我们有一个基于 Spring MVC 的 RESTful API 其中包含敏感信息 API 应该是安全的但是在每个请求中发送用户的凭据用户通行证组合是不可取的根据 REST 准则和内部业务要求服务器必须保持无状
无法绑定多部分标识符“System.Data.DataRowView”[重复]

这个问题在这里已经有答案了我有一个填充 Combobox1 的表而 Combobox1 应该填充 Combobox2 这就是问题所在这就是我遇到的例外无法绑定多部分标识符 System Data DataRowView Code p
按对象属性搜索对象向量

我试图找出一种很好的方法来查找向量中某个对象的索引通过将字符串与对象中的成员字段进行比较像这样 find vector begin vector end object where obj getName myString 我搜索没有成功
在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色

我使用相同的代码http www aspsnippets com Articles Google Maps V3 Draw route line Between two geographic locations Cooperatives L

在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色

在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色 的相关文章

随机推荐

热门标签

在 javascript 中更改谷歌地图 v3 上的多段线描边的颜色的相关文章