Task Description:
I want to draw a road from subway station to Tiananmen Square, and I need to change this route according to my preference.
How to achieve:
Left click on the map, draw the route, double-click to draw the end, after the drawing is finished, the route can be edited.
TIPS:
After API1.1, you can use Enableediting () to turn on the polyline editable feature.
<! DOCTYPE html>"Content-type"Content="text/html; Charset=utf-8"/> <script type="Text/javascript"Src="http://api.map.baidu.com/api?v=1.4"></script> <script type="Text/javascript"Src="Http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="Text/javascript"Src="Http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <title> +.1 Customizing editable traffic routes </title>"Clear:both;"> <div style="Float:left, width:500px, height:340px, border:1px solid gray"Id="Container"> </div> </div></body>"Text/javascript">varMap =NewBmap.map ("Container"); Map.centerandzoom (NewBmap.point (116.404,39.915), -); varE1, E2; varp = [];//the point used to store the polyline varpolyline; varDonedraw =0;//determine whether to draw a polyline endMap.addeventlistener ("Click", function (E1) {//When the mouse is clicked if(Donedraw = =0) {//determine if the curve is finishedP.push (NewBmap.point (E1.POINT.LNG, E1.point.lat))//Store the latitude and longitude of each point on the curve if(polyline) {Polyline.setpath (P);}//Gets the point SetPath (p) on the polyline if the curve exists Else{polyline =NewBmap.polyline (P); }//If the polyline does not exist, increase this point if(P.length <2) {return; }//do not draw when a point on a polyline has only oneMap.addoverlay (polyline);//Drawing Curves } }); Map.addeventlistener ("DblClick", function (E2) {//When the mouse double-clicks: End drawing, and you can edit the curveAlert"Draw Complete"); Donedraw=Ten; Polyline.enableediting (); });</script>
Baidu Map custom Editable traffic routes