使用Google Map Api v.3使用GeoJson在Polyline上设置动画符号 [英] Animating Symbol on Polyline with GeoJson Using Google Map Api v.3
本文介绍了使用Google Map Api v.3使用GeoJson在Polyline上设置动画符号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
{
type：FeatureCollection，
crs：{type：name，properties：{name：urn：ogc：def：crs：OGC：1.3：CRS84}}，
：[
{type：Feature，properties：{Name：Saluran I，descriptio：null，timestamp：null，begin：null， ：null，altitudeMo：null，tessellate：1，extrude：-1，visibility：-1，drawOrder：null，icon：null}，geometry：{type ：LineString，coordinates：[[115.16149264388849，-8.692345779607091]，[115.1619799975747，-8.693099022961922]，[115.1621209969948，-8.693450580043523]，[115.1621893956145，-8.69367970180001]，[115.1622369286341，-8.693885376054253]，[115.16248624315379， - 8.694125330077087]，[115.1625293838875，-8.694297689361708]，[115.1625662929434，-8.694480291402353]，[115.1638244075253，-8.694489484612449]]}}，
{type：Feature，properties：{Name： Saluran II，descriptio：null，timestamp：null，b egl：null，end：null，altitudeMo：null，tessellate：1，extrude：-1，visibility：-1，drawOrder：null，icon：null}， geometry：{type：LineString，coordinates：[[115.1647420393289，-8.691263798416188]，[115.16480885306601，-8.691910749059817]，[115.1648021389716，-8.692020041570267]，[115.16476460026691，-8.692197857370241]，[115.16467300953239， - 8.692311184386924]，[115.1645832229062，-8.692570845169653]，[115.164590403574，-8.69280000074686]，[115.1642184661912，-8.692878192437396]，[115.16418831658579，-8.693471791565786]，[115.16411080877791，-8.69417746825723]，[115.1639500244154，-8.694469415766308]，[115.1638498474275，-8.69450385891758 ]，[115.1637726241196，-8.6949183073729]，[115.1637482310352，-8.695106949243888]，[115.16369576938609，-8.695516868583109]，[115.1633930487843，-8.695552277605064]，[115.1628619559151，-8.695616245099258]，[115.1628453449146，-8.695861398016726]，[115.1625531407406，-8.695981675836846] ， [115.1619167160671，-8.696110249672243]，[115.1621001879372，-8.697348692504496]，[115.1619454016469，-8.697429501488445]]}}，
{type：Feature，properties：{Name：Saluran III ，descriptio：null，timestamp：null，begin：null，end：null，altitudeMo：null，tessellate：1，extrude：-1，visibility ，drawOrder：null，icon：null}，geometry：{type：LineString，coordinates：[[115.1649918428157，-8.698726927918452]，[115.1647717936939，-8.698771893626452]，[115.16464767674699， - 8.698766178177538]，[115.164531974608，-8.698766747854149]，[115.1643076171094，-8.698759607942607]，[115.1639182931609，-8.698808262913275]，[115.1637251462856，-8.69887278452787]，[115.1633890383243，-8.698973728970067]，[115.1626822904817，-8.699201749498535]，[115.1626359629325，-8.699082282748639 ]，[115.1621957225977，-8.698410881596306]，[115.16193358395429，-8.69743434218265]]}}
]
}
我可以在我的地图上显示geojson，
line.loadGeoJson（urlBase +'peta / aliran.geojson'）;
//风格特征aliran
line.setStyle（函数（特征）{
返回{
strokeColor：'＃0000FF'，
strokeWeight：5，
zIndex：1
}
}）;
//设置地图;
line.setMap（map）;
但我有问题，当我想动画像这样的符号： https://developers.google.com/maps/documentation/javascript/examples/overlay-符号动画。有人能帮助我吗？ 使用此 =nofollow>相关示例（沿着指引服务中的多段线绘制标记）
代码段：
$ b
var map; var position; var marker = null; var polyline = null; var poly2 = null; var speed = 0.000005，wait = 1; var infowindow = null; var myPano; var panoClient; var nextPanoId; var timerHandle = null; var polyline; function initialize（）{map = new google .maps.Map（document.getElementById（map_canvas），{center：new google.maps.LatLn g（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var bounds = new google.maps.LatLngBounds（）; map.addListener（'addfeature'，function（e）{processPoints（e.feature.getGeometry（），bounds.extend，bounds）; if（e.feature.getGeometry（）。getType（）==LineString ）{polyline = new google.maps.Polyline（{map：map，path：e.feature.getGeometry（）。getArray（），strokeWeight：5，strokeOpacity：0.4，strokeColor：'red'}）; marker = createMarker polyline.getPath（）。getAt（0），here，marker text）; setTimeout（startAnimation，2000）;} map.fitBounds（bounds）;}）; // var line = google.maps.Data; map.data.addGeoJson（以GeoJSON）; //风格特征aliran map.data.setStyle（function（feature）{return {strokeColor：'＃0000FF'，strokeWeight：1，zIndex：1}}）; //设置地图; map.data.setMap（map）;} var step = 5; // metresvar tick = 100; // millisecondsvar eol; var k = 0; var stepnum = 0; var speed =; var lastVertex = 1; // ===============动画函数===== ================= function updatePoly（d）{//每隔20个顶点产生一个新的折线，因为如果（poly2.getPath（））更新100顶点的poly太慢， .getLength（）> 20）{poly2 = new google.maps.Polyline（[polyline.getPath（）。getAt（lastVertex - 1）]）; } if（polyline.GetIndexAtDistance（d）< lastVertex + 2）{if（poly2.getPath（）。getLength（）> 1）{poly2.getPath（）。removeAt（poly2.getPath（）。getLength（） - 1）} poly2.getPath（）。insertAt（poly2.getPath（）。getLength（），polyline.GetPointAtDistance（d））; } else {poly2.getPath（）。insertAt（poly2.getPath（）。getLength（），polyline.getPath（）。getAt（polyline.getPath（）。getLength（） - 1））; }} function animate（d）{if（d> eol）{map.panTo（endLocation.latlng）; marker.setPosition（endLocation.latlng）;返回; } var p = polyline.GetPointAtDistance（d）; map.panTo（P）; marker.setPosition（P）; updatePoly（d）; timerHandle = setTimeout（animate（+（d + step）+），tick）;} function startAnimation（）{if（timerHandle）clearTimeout（timerHandle）; eol = google.maps.geometry.spherical.computeLength（polyline.getPath（））; map.setCenter（polyline.getPath（）getAt（0）。）; poly2 = new google.maps.Polyline（{path：[polyline.getPath（）。getAt（0）]，strokeColor：＃0000FF，strokeWeight：10}）; setTimeout（animate（0），tick）; //为初始地图显示留出时间} function processPoints（geometry，callback，thisArg）{if（google.maps.LatLng的几何实例）{callback.call（thisArg，geometry）; （其他如果（几何instanceof google.maps.Data.Point）{callback.call（thisArg，geometry.get（））; （else）{geometry.getArray（）。forEach（function（g）{processPoints（g，callback，thisArg）;}）; }} // ============================================== ====函数createMarker（latlng，label，html）{var contentString ='< b>'+ label +'< / b>< br>'+ html; var marker = new google.maps.Marker（{position：latlng，map：map，title：label，icon：{path：google.maps.SymbolPath.CIRCLE，scale：8，strokeColor：'＃393'}，zIndex： Math.round（latlng.lat（）* -100000）<5}）; marker.myname = label; // gmarkers.push（marker）; google.maps.event.addListener（marker，'click'，function（）{infowindow.setContent（contentString）; infowindow.open（map，marker）;}）;返回marker;} google.maps.event.addDomListener（window，load，initialize）; var geoJson = {type：FeatureCollection，crs：{type：name，properties： {name：urn：ogc：def：crs：OGC：1.3：CRS84}}，features：[{type：Feature，properties：{Name：Saluran II ，descriptio：null，timestamp：null，begin：null，end：null，altitudeMo：null，tessellate：1，extrude：-1，visibility ，drawOrder：null，icon：null}，geometry：{type：LineString，coordinates：[[115.1647420393289，-8.691263798416188]，[115.16480885306601，-8.691910749059817]，[115.1648021389716， - [115.16476460026691，-8.692197857370241]，[115.16467300953239，-8.692311184386924]，[115.1645832229062，-8.692570845169653]，[115.164590403574，-8.69280000074686]，[115.1642184661912，-8.692878192437396]，[115.1641 8831658579，-8.693471791565786]，[115.16411080877791，-8.69417746825723]，[115.1639500244154，-8.694469415766308]，[115.1638498474275，-8.69450385891758]，[115.1637726241196，-8.6949183073729]，[115.1637482310352，-8.695106949243888]，[115.16369576938609，-8.695516868583109]，[115.1633930487843 ，-8.695552277605064]，[115.1628619559151，-8.695616245099258]，[115.1628453449146，-8.695861398016726]，[115.1625531407406，-8.695981675836846]，[115.1619167160671，-8.696110249672243]，[115.1621001879372，-8.697348692504496]，[115.1619454016469，-8.697429501488445]]}}] }; / *************** ********************** Mike Williams的epolys.js **由Larry Ross更新为API v3 ** ** Google Maps API扩展** **将各种方法添加到google.maps.Polygon和google.maps.Polyline ** ** .Contains（latlng）返回true是poly包含指定的** GLatLng ** ** .Area（）返回不是自相交的poly的近似区域** ** .Distance（）返回多路径的长度** ** .Bounds（）返回一个GLatLngBounds，该边界绑定poly * * ** .GetPointAtDistance（）沿路径返回指定距离**处的GLatLng。 **距离以米为单位指定**如果路径短于此距离，则返回null ** ** .GetPointsAtDistance（）沿路径以**指定间隔返回一个GLatLng数组。 **距离以米为单位指定** ** .GetIndexAtDistance（）返回沿路径指定**距离处的顶点数。 **距离以米为单位指定**如果路径短于此距离，则返回null ** ** .Bearing（v1？，v2？）返回两个顶点之间的方位**如果v1为null，则返回轴承从第一个到第最后**如果v2为空，则将方位从v1返回到下一个** ** ******************************** ***************************************** **这个Javascript由Mike Williams提供**布莱克浦社区教会Javascript团队** http://www.blackpoolchurch.org/ ** http://econym.org.uk/gmap/ ** **本作品根据知识共享许可协议授权** http://creativecommons.org/licenses/by/2.0/uk/ ** ******************* ************************************************** **** **版本1.1 2007年6月6日**版本1.2 2007年7月1日 - 修正：边界省略顶点零**添加：轴承**版本1.3 2008年11月28日add：GetPointsAtDistance（）* *版本1.4 2009年1月12日修复：GetPointsAtDistance（）** 3.0版2010年8月11日更新至v3 ** * \ ******************** ******************* / // == =一个方法，它沿路径返回给定距离的点的GLatLng === // ===如果路径短于指定的距离，则返回null === google.maps.Polyline.prototype.GetPointAtDistance = function（米）{/ /一些尴尬的特殊情况下，如果（米== 0）返回this.getPath（）。getAt（0）;如果（米<0）返回空; if（this.getPath（）。getLength（）< 2）return null; var dist = 0; var olddist = 0;对于（var i = 1;（i< this.getPath（）。getLength（）& dist< meters）; i ++）{olddist = dist; dist + = google.maps.geometry.spherical.computeDistanceBetween（this.getPath（）。getAt（i），this.getPath（）。getAt（i - 1））; } if（dist
html，body，＃map_canvas {身高：100％;宽度：100％; margin：0px; < script src =https：//
i have geojson like this :
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Name": "Saluran I", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.16149264388849, -8.692345779607091 ], [ 115.1619799975747, -8.693099022961922 ], [ 115.1621209969948, -8.693450580043523 ], [ 115.1621893956145, -8.69367970180001 ], [ 115.1622369286341, -8.693885376054253 ], [ 115.16248624315379, -8.694125330077087 ], [ 115.1625293838875, -8.694297689361708 ], [ 115.1625662929434, -8.694480291402353 ], [ 115.1638244075253, -8.694489484612449 ] ] } },
{ "type": "Feature", "properties": { "Name": "Saluran II", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.1647420393289, -8.691263798416188 ], [ 115.16480885306601, -8.691910749059817 ], [ 115.1648021389716, -8.692020041570267 ], [ 115.16476460026691, -8.692197857370241 ], [ 115.16467300953239, -8.692311184386924 ], [ 115.1645832229062, -8.692570845169653 ], [ 115.164590403574, -8.69280000074686 ], [ 115.1642184661912, -8.692878192437396 ], [ 115.16418831658579, -8.693471791565786 ], [ 115.16411080877791, -8.69417746825723 ], [ 115.1639500244154, -8.694469415766308 ], [ 115.1638498474275, -8.69450385891758 ], [ 115.1637726241196, -8.6949183073729 ], [ 115.1637482310352, -8.695106949243888 ], [ 115.16369576938609, -8.695516868583109 ], [ 115.1633930487843, -8.695552277605064 ], [ 115.1628619559151, -8.695616245099258 ], [ 115.1628453449146, -8.695861398016726 ], [ 115.1625531407406, -8.695981675836846 ], [ 115.1619167160671, -8.696110249672243 ], [ 115.1621001879372, -8.697348692504496 ], [ 115.1619454016469, -8.697429501488445 ] ] } },
{ "type": "Feature", "properties": { "Name": "Saluran III", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.1649918428157, -8.698726927918452 ], [ 115.1647717936939, -8.698771893626452 ], [ 115.16464767674699, -8.698766178177538 ], [ 115.164531974608, -8.698766747854149 ], [ 115.1643076171094, -8.698759607942607 ], [ 115.1639182931609, -8.698808262913275 ], [ 115.1637251462856, -8.69887278452787 ], [ 115.1633890383243, -8.698973728970067 ], [ 115.1626822904817, -8.699201749498535 ], [ 115.1626359629325, -8.699082282748639 ], [ 115.1621957225977, -8.698410881596306 ], [ 115.16193358395429, -8.69743434218265 ] ] } }
]
}
i can showing that geojson on my map,
line.loadGeoJson(urlBase + 'peta/aliran.geojson');
// styling features aliran
line.setStyle(function(feature){
return {
strokeColor : '#0000FF',
strokeWeight : 5,
zIndex : 1
}
});
// set map;
line.setMap(map);
but i have problem when i want to animating symbols on the line like this : https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate. could anybody help me ?
解决方案
Leveraging the code in this related example (which animates a marker along a polyline from the directions service) to animate a symbol along one of the polylines in your data:
code snippet:
var map;
var position;
var marker = null;
var polyline = null;
var poly2 = null;
var speed = 0.000005,
wait = 1;
var infowindow = null;
var myPano;
var panoClient;
var nextPanoId;
var timerHandle = null;
var polyline;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(e) {
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
if (e.feature.getGeometry().getType() == "LineString") {
polyline = new google.maps.Polyline({
map: map,
path: e.feature.getGeometry().getArray(),
strokeWeight: 5,
strokeOpacity: 0.4,
strokeColor: 'red'
});
marker = createMarker(polyline.getPath().getAt(0), "here", "marker text");
setTimeout(startAnimation, 2000);
}
map.fitBounds(bounds);
});
// var line = google.maps.Data;
map.data.addGeoJson(geoJson);
// styling features aliran
map.data.setStyle(function(feature) {
return {
strokeColor: '#0000FF',
strokeWeight: 1,
zIndex: 1
}
});
// set map;
map.data.setMap(map);
}
var step = 5; // metres
var tick = 100; // milliseconds
var eol;
var k = 0;
var stepnum = 0;
var speed = "";
var lastVertex = 1;
//=============== animation functions ======================
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getPath().getLength() > 20) {
poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex - 1)]);
}
if (polyline.GetIndexAtDistance(d) < lastVertex + 2) {
if (poly2.getPath().getLength() > 1) {
poly2.getPath().removeAt(poly2.getPath().getLength() - 1)
}
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointAtDistance(d));
} else {
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.getPath().getAt(polyline.getPath().getLength() - 1));
}
}
function animate(d) {
if (d > eol) {
map.panTo(endLocation.latlng);
marker.setPosition(endLocation.latlng);
return;
}
var p = polyline.GetPointAtDistance(d);
map.panTo(p);
marker.setPosition(p);
updatePoly(d);
timerHandle = setTimeout("animate(" + (d + step) + ")", tick);
}
function startAnimation() {
if (timerHandle) clearTimeout(timerHandle);
eol = google.maps.geometry.spherical.computeLength(polyline.getPath());
map.setCenter(polyline.getPath().getAt(0));
poly2 = new google.maps.Polyline({
path: [polyline.getPath().getAt(0)],
strokeColor: "#0000FF",
strokeWeight: 10
});
setTimeout("animate(0)", tick); // Allow time for the initial map display
}
function processPoints(geometry, callback, thisArg) {
if (geometry instanceof google.maps.LatLng) {
callback.call(thisArg, geometry);
} else if (geometry instanceof google.maps.Data.Point) {
callback.call(thisArg, geometry.get());
} else {
geometry.getArray().forEach(function(g) {
processPoints(g, callback, thisArg);
});
}
}
// ==================================================
function createMarker(latlng, label, html) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
},
zIndex: Math.round(latlng.lat() * -100000) << 5
});
marker.myname = label;
// gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"Name": "Saluran II",
"descriptio": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMo": null,
"tessellate": 1,
"extrude": -1,
"visibility": -1,
"drawOrder": null,
"icon": null
},
"geometry": {
"type": "LineString",
"coordinates": [
[115.1647420393289, -8.691263798416188],
[115.16480885306601, -8.691910749059817],
[115.1648021389716, -8.692020041570267],
[115.16476460026691, -8.692197857370241],
[115.16467300953239, -8.692311184386924],
[115.1645832229062, -8.692570845169653],
[115.164590403574, -8.69280000074686],
[115.1642184661912, -8.692878192437396],
[115.16418831658579, -8.693471791565786],
[115.16411080877791, -8.69417746825723],
[115.1639500244154, -8.694469415766308],
[115.1638498474275, -8.69450385891758],
[115.1637726241196, -8.6949183073729],
[115.1637482310352, -8.695106949243888],
[115.16369576938609, -8.695516868583109],
[115.1633930487843, -8.695552277605064],
[115.1628619559151, -8.695616245099258],
[115.1628453449146, -8.695861398016726],
[115.1625531407406, -8.695981675836846],
[115.1619167160671, -8.696110249672243],
[115.1621001879372, -8.697348692504496],
[115.1619454016469, -8.697429501488445]
]
}
}]
};
/*********************************************************************\
* *
* epolys.js by Mike Williams *
* updated to API v3 by Larry Ross *
* *
* A Google Maps API Extension *
* *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* *
* .Contains(latlng) returns true is the poly contains the specified *
* GLatLng *
* *
* .Area() returns the approximate area of a poly that is *
* not self-intersecting *
* *
* .Distance() returns the length of the poly path *
* *
* .Bounds() returns a GLatLngBounds that bounds the poly *
* *
* .GetPointAtDistance() returns a GLatLng at the specified distance *
* along the path. *
* The distance is specified in metres *
* Reurns null if the path is shorter than that *
* *
* .GetPointsAtDistance() returns an array of GLatLngs at the *
* specified interval along the path. *
* The distance is specified in metres *
* *
* .GetIndexAtDistance() returns the vertex number at the specified *
* distance along the path. *
* The distance is specified in metres *
* Returns null if the path is shorter than that *
* *
* .Bearing(v1?,v2?) returns the bearing between two vertices *
* if v1 is null, returns bearing from first to last *
* if v2 is null, returns bearing from v1 to next *
* *
* *
***********************************************************************
* *
* This Javascript is provided by Mike Williams *
* Blackpool Community Church Javascript Team *
* http://www.blackpoolchurch.org/ *
* http://econym.org.uk/gmap/ *
* *
* This work is licenced under a Creative Commons Licence *
* http://creativecommons.org/licenses/by/2.0/uk/ *
* *
***********************************************************************
* *
* Version 1.1 6-Jun-2007 *
* Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero *
* add: Bearing *
* Version 1.3 28-Nov-2008 add: GetPointsAtDistance() *
* Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() *
* Version 3.0 11-Aug-2010 update to v3 *
* *
\*********************************************************************/
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
// === A method which returns the Vertex number at a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetIndexAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
return i;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<input type="button" value="restart animation" onclick="startAnimation()" />
<div id="map_canvas"></div>
这篇关于使用Google Map Api v.3使用GeoJson在Polyline上设置动画符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
