谷歌离线地图 教程

添加线段

编辑时间:2017-03-06

QQ截图20170301152924.png

多段线

如需在地图上绘制线,请使用多段线。 Polyline 类在地图上定义线性相连线段叠层。Polyline 对象包含一

LatLng 位置数组,它创建的一系列线段以有序方式将这些位置连接起来。

添加多段线

Polyline 构造函数带有一组用于指定线的 LatLng 坐标的 PolylineOptions,以及一组用于调整多段线视觉行

为的样式。

Polyline 对象在地图上绘制为一系列直线线段。您可以在构建线时在 PolylineOptions 内指定线描边的自定

义颜色、粗细和不透明度,也可在构建后更改这些属性。多段线支持下列描边样式:

·         strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。


·         strokeOpacity 指定一个介于 0.0  1.0 的数值,用于确定线颜色的不透明度。默认值为 1.0


·         strokeWeight 指定线的宽度(单位:像素)。


多段线的 editable 属性指定用户是否可以编辑形状。同理,您也可以通过设置draggable 属性来允许用户拖动

线

 

以下代码将添加一个多线段:


var testPath = new google.maps.Polyline({
   
path: pathLatLng,
   
draggable:true,
   
strokeColor: '#FF0000',
   
strokeOpacity: 1.0,
   
strokeWeight: 2
});
testPath.setMap(map);

移除多段线

如需移除地图中的多段线,请调用 setMap() 方法,并传递 null 作为其自变量。在下例中,flightPath 是一个多段线对象:


请注意,以上方法不会删除多段线,而只是从地图中移除多段线。如果您实际上是想删除多段线,则应先将其从地图中移除,然后将多段线本身设置为 null

testPath.setMap(null);


添加虚线


您可以通过将多段线的不透明度设置为 0 并按固定间隔在线上叠加不透明符号来实现虚线效果。

QQ截图20170306163935.png


代码示例:


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

//使用repeat属性,每隔20px重复一次
var line = new google.maps.Polyline({
   
path: [{lat: 30, lng: 114}, {lat:35,lng:95},{lat: 40, lng: 119}],
   
strokeOpacity: 0,
   
icons: [{
       
icon: lineSymbol,
       
offset: '0',
       
repeat: '20px'
   
}],
   
map: map
});

 



自定义路径

自定义符号允许您向多段线添加许多不同的形状。

QQ截图20170306163739.png

代码示例:

//定义三个图形
var symbolOne = {
   
path: 'M -2,0 0,-2 2,0 0,2 z',
   
strokeColor: '#F00',
   
fillColor: '#F00',
   
fillOpacity: 1
};

var symbolTwo = {
   
path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
   
strokeColor: '#00F',
   
rotation: 45
};

var symbolThree = {
   
path: 'M -2,-2 2,2 M 2,-2 -2,2',
   
strokeColor: '#292',
   
strokeWeight: 4
};

//创建具有图标的线段
var line = new google.maps.Polyline({
   
path: [{lat: 30, lng:104},{lat: 40, lng: 119}],
   
icons: [
       
{
           
icon: symbolOne,
           
offset: '0%'
       
}, {
           
icon: symbolTwo,
           
offset: '50%'
       
}, {
           
icon: symbolThree,
           
offset: '100%'
       
}
   
],
   
map: map
});

 

以动画呈现符号


您可以通过利用 DOM 的 window.setInterval() 函数按固定间隔更改符号的偏移,沿某一路径以动画呈现符号。


代码示例:


var lineSymbol = {
   
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
   
scale: 5,
   
strokeColor: '#393'
};

// 将图标添加到线段上 ,使用icons属性
var line = new google.maps.Polyline({
   
path: [{lat: 30, lng: 104}, {lat:35,lng:90},{lat: 40, lng: 119}],
   
icons: [{
       
icon: lineSymbol,
       
offset: '100%'
   
}],
   
map: map
});

animateCircle(line);

function animateCircle(line) {
   
var count = 0;
    
window.setInterval(function() {
       
count = (count + 1) % 200;
       
var icons = line.get('icons');
       
icons[0].offset = (count / 2) + '%';
        line.
set('icons', icons);
   
}, 20);
}