javascript - 使用 api v3 绘制多条编码多段线

标签 javascript google-maps-api-3

我有一组编码折线,是从方向服务的结果中检索到的,我已将它们存储在一个 php 数组中。

使用下面的代码,我可以添加一条折线。如何修改它以同时添加多条折线?

var code = '_mjsB{qp{LvAe@xImCjGgBf@St@Qf@Un@e@Hm@Pc@VW^MhAc@`B{@lAw@zCyA`@KvEyB`Ao@PQNK';

var paths = google.maps.geometry.encoding.decodePath(code);

var flightPath = new google.maps.Polyline({
  path:pathss,
  strokeColor: "#0000FF",
  strokeOpacity: 1.0,
  strokeWeight: 2
}); flightPath.setMap(map);

最佳答案

您是希望所有多段线都具有相同的样式,还是需要为不同的多段线设置不同的样式?让我们假设它们现在是一样的;让我知道它们是否需要不同,我们可以调整代码。

因此,首先,编写 PHP 代码以生成编码路径的 JavaScript 数组。我会让你解决这部分。

然后,用 JavaScript 编写一个简单的循环来解码每条路径并将其添加到 map 中:

// These are the encoded paths generated from PHP
var encodedFlightPaths = [
    '...first-path...',
    '...second-path...',
    '...third-path...'
];

addEncodedPaths( encodedFlightPaths );

function addEncodedPaths( encodedPaths ) {
    for( var i = 0, n = encodedPaths.length;  i < n;  i++ ) {
        addEncodedPath( encodedPaths[i] );
    }
}

function addEncodedPath( encodedPath ) {
    var path = google.maps.geometry.encoding.decodePath( encodedPath );

    var polyline = new google.maps.Polyline({
        path: path,
        strokeColor: "#0000FF",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    polyline.setMap( map );
}

关于javascript - 使用 api v3 绘制多条编码多段线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15601524/

相关文章:

javascript - Google Places 自动完成搜索框 : How to control (enable/disable) predictions

javascript - 单击项目动画并显示谷歌地图上相关标记的信息窗口

javascript - Google map 异步添加标记

php - 使用 PHP 将 Curl 检索到的 HTML 字符串转换为 JSON,使用 AJAX 服务

javascript - 选中时触发复选框

javascript - require() 相当于 if import { Something } from 'somewhere'

javascript - 如何将函数包装在函数中以避免代码重复

javascript - 尝试使用 Nodejs 8 加载 GoogleCloud 数据存储模块时出现 "Provided module can' t 加载错误

google-maps - 从 Google Places 检索 Google FID

javascript - 基于网络的应用程序是否可以以某种方式访问​​智能手机的位置?并报告回来?