谷歌地图折线虚线和双线 [英] google map polyline dashed and double lines

问题描述

我有一个Google地图折线此处示例，有四个坐标。我使用symbol属性绘制了虚线，

  var lineSymbol = {
 path：'M 0，-1 0,1'，
 strokeOpacity：1，
 strokeWeight：2，
 scale：3 
}; 
 
 var lineCoordinates = [
 new google.maps.LatLng（22.291,153.027），
 new google.maps.LatLng（18.291,153.027），
 google .maps.LatLng（15.291,153.027），
 new google.maps.LatLng（11.291,153.027）]; 
 
 var line = new google.maps.Polyline（{
 path：lineCoordinates，
 strokeOpacity：0，
图标：[{
 icon：lineSymbol ，
抵消：'50％'，
重复：'15px'
}]，
 strokeColor：'＃FF0000'，
 map：map 
 }）; 
  

但是我怎样才能在第二个和第三个坐标之间画一条虚线，在第三个和第三个坐标之间画一条双线第四？

解决方案

您无法对单个多段线的单独线段进行样式设计。您需要制作单独的多段线，然后将所需样式应用到每条单独的多段线：

  var lineCoordinates = [
新google.maps.LatLng（22.291,153.027），
新google.maps.LatLng（18.291,153.027），
新google.maps.LatLng（15.291,153.027），
新google .maps.LatLng（11.291，153.027）]; 
 
 for（var i = 0; i< lineCoordinates.length  -  1; i ++）{
 var line = new google.maps.Polyline（{
 path：[lineCoordinates [i]，lineCoordinates [i + 1]]，
 strokeOpacity：0，
图标：图标[i]，
 strokeColor：color [i]，
 map：map 
}）; 
} 
  

概念证明小提琴

代码段：

  var geocoder; var map; function initialize（）{var map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps。 LatLng（18.291,153.027），zoom：5，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var lineSymbol = {path：'M 0，-1 0,1'，strokeOpacity：1，strokeWeight：2，scale：3}; var doubleLine = {path：'M 0.5，-1 0.5,1 M -0.5，-1 -0.5,1'，strokeOpacity：1，strokeWeight：1，scale：3}; var color = [＃FF0000，＃FF00FF，＃0000FF]; var icons = [[{icon：lineSymbol，offset：'0％'，repeat：'6px'}]，[{icon：lineSymbol，offset：'50％'，repeat：'15px'}]，[{icon： doubleLine，偏移量：'0％'，重复：'6px'}]]; var lineCoordinates = [new google.maps.LatLng（22.291,153.027），new google.maps.LatLng（18.291,153.027），new google.maps.LatLng（15.291,153.027），new google.maps.LatLng（11.291,153.027） ）];对于（var i = 0; i  

  html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//   

I have a google map polyline sample here with four coordinates. I drawn the dashed line using symbol property as,

 var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        strokeWeight: 2,
        scale: 3
    };

    var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027),
    new google.maps.LatLng(15.291, 153.027),
    new google.maps.LatLng(11.291, 153.027)];

    var line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeOpacity: 0,
        icons: [{
            icon: lineSymbol,
            offset: '50%',
            repeat: '15px'
        }],
        strokeColor: '#FF0000',
        map: map
    });

But how can I draw the dashed line only between second and third coordinates and a double line between third and fourth?

解决方案

You can't style separate segments of a single polyline. You need to make separate polylines, then apply the style you want to each separate polyline:

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027),
new google.maps.LatLng(15.291, 153.027),
new google.maps.LatLng(11.291, 153.027)];

for (var i = 0; i < lineCoordinates.length - 1; i++) {
    var line = new google.maps.Polyline({
        path: [lineCoordinates[i], lineCoordinates[i + 1]],
        strokeOpacity: 0,
        icons: icons[i],
        strokeColor: color[i],
        map: map
    });
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(18.291, 153.027),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    strokeWeight: 2,
    scale: 3
  };
  var doubleLine = {
    path: 'M 0.5,-1 0.5,1 M -0.5,-1 -0.5,1',
    strokeOpacity: 1,
    strokeWeight: 1,
    scale: 3
  };
  var color = ["#FF0000", "#FF00FF", "#0000FF"];
  var icons = [
    [{
      icon: lineSymbol,
      offset: '0%',
      repeat: '6px'
    }],    [{
      icon: lineSymbol,
      offset: '50%',
      repeat: '15px'
    }],
    [{
      icon: doubleLine,
      offset: '0%',
      repeat: '6px'
    }]
  ];

  var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027),
    new google.maps.LatLng(15.291, 153.027),
    new google.maps.LatLng(11.291, 153.027)
  ];

  for (var i = 0; i < lineCoordinates.length - 1; i++) {
    var line = new google.maps.Polyline({
      path: [lineCoordinates[i], lineCoordinates[i + 1]],
      strokeOpacity: 0,
      icons: icons[i],
      strokeColor: color[i],
      map: map
    });
  }

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

这篇关于谷歌地图折线虚线和双线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！