In order to satisfy the user from one point to another point has a clear point, and delete a point, the associated line is also removed, the figure is as follows:
Right-click the route associated with the point and the effect is as follows:
The HTML page code is as follows1、初始化地图2、添加覆盖物3、地图上添加多个点4、多个点之间的连线5、添加方向6、测试
<!DOCTYPE html>
The JS code is as follows:$ (function () {//map initialization var map = new Bmap.map ("container"); var point = new Bmap.point (121.29, 31.14); Map.centerandzoom (Point, 15); Info window style var opts = {width:150,//Information window width height:80,//Information window height title: ""//Information window title}; Create callout----------------------//Create Callout Tool instance Markertool//var Mktool = new Bmaplib.markertool (map,{autoclose:true, Follo Wtext: "Add Callout"}); Add event Map.addeventlistener to the map ("click", Addmapmarkers); Map right-click to cancel Add Map.addeventlistener ("RightClick", function (e) {//Map.removeeventlistener ("click", Addmapmarkers) ; Mktool.close (); }); var points = []; Remember to mark the point var n = 0; Label Quantity record var pointtwo = []; Record the latitude and longitude of the created dimension var rememberpoints = []; The record is which two points are created between the polyline var polylinedel = []; Used to control the array to delete the polyline/var square = [];//record custom overlay var xxx = []; function Newmarker () {}//Event function Map function addmapmarkers (e) {if (e && e.stoppropagation) { E.stoppropagation (); } else {window.event.cancelBubble = false; } console.log ("Longitude:" + e.point.lng + ", dimension" + E.point.lat); var polyline; var polynum; var marker, MySQUARE; var mk = Drawmarker (e); Create callout marker = Mk.marker; MySQUARE = Mk.mysquare; Click on the anchor point to get latitude and longitude Marker.addeventlistener ("click", Function (e) {e.domevent.stoppropagation (); Console.log ("Longitude:" + e.point.lng + ", dimension" + E.point.lat); var title = This.gettitle (); Gets the current title var point1 = This.getlabel (). Point; Gets the current latitude and longitude of var Pointcon = This.getlabel (). Content; Get is that point Pointtwo.push (POINT1); Rememberpoints.push (Pointcon); Pointtwo.length > 2? Pointtwo.shift (): null; Delete the first element forever keep two number rememberpoints.length > 2? Rememberpoints.shift (): null; Mysquare.toggle ();//Show hidden toggle//Two dots between lines if (Pointtwo.length >= 2 && remeMBERPOINTS[0]! = Rememberpoints[1]) {drawLine (pointtwo[0], pointtwo[1], rememberpoints); } }); Right-click Delete Marker.addeventlistener ("RightClick", function (e) {e.domevent.stoppropagation (); Window.event.preventDefault (); if (e && e.stoppropagation) {e.stoppropagation (); } else {window.event.cancelBubble = true; } var delpoint = This.getlabel (). Content; var pn = delpoint.substring (1, 10); Gets the subscript created for (var i = 0; i < polylinedel.length; i++) {if (Delpoint = = Polylinedel[i].point S[0] | | Delpoint = = Polylinedel[i].points[1]) {map.removeoverlay (polylinedel[i].polyline); Map.removeoverlay (Polylinedel[i].addarrow); }} this.map.removeOverlay (marker); Map.removeoverlay (Xxx[pn].mysquare); Remove the elastic window frame}); n++; }//Create callout overlay function Drawmarker (e) {var mk = {}; Create label var marker = new Bmap.marker (new Bmap.point (E.POINT.LNG, E.point.lat), {title: "T" + n}); var label = new Bmap.label ("P" + N, {offset:new bmap.size (20,-10)}); Set the label style Label.setstyle ({display: "none"}); Add a custom overlay var mysquare = new Squareoverlay (new Bmap.point (E.POINT.LNG, E.point.lat), This.map); Map.addoverlay (MySQUARE); Mysquare.hide (); Marker.enabledragging ();//Open drag Points.push (marker); The created label is placed into the array map.addoverlay (Points[n]); Marker.setlabel (label); Mk.marker = marker; Mk.label = label; Mk.mysquare = MySQUARE; Xxx.push (MK); Return MK; }/* Lines between callouts returns two points between polyline rememberpoints record lines */function DrawLine (Pointa, POINTB, twopoints) { var obj = {}; var isadd = true; var polyline; for (var i = 0; i< Polylinedel.length; i++) {if ((twopoints[0] = = Polylinedel[i].points[0] && twopoints[1] = = polylinedel[i].points[1]) | | (Twopoints[1] = = Polylinedel[i].points[0] && twopoints[0] = polylinedel[i].points[1])) {Isadd = false; Alert ("Cannot repeat connection"); }} if (Isadd) {polyline = new Bmap.polyline ([New Bmap.point (POINTA.LNG, Pointa. LAT), new Bmap.point (POINTB.LNG, Pointb.lat)], {strokecolor: "Red", Strokeweight:2, Strokeopa city:0.5}); Map.addoverlay (polyline); Obj.points = twopoints; Obj.polyline = polyline; Arrow pointing to Obj.addarrow = Addarrow (polyline, MATH.PI/7); Polylinedel.push (obj); } pointtwo = new Array (); rememberpoints = new Array (); Return }//Complex custom overlay//define Custom overlay constructor function Squareoverlay (center, length, Thismap) {This._center = center; this._length = length; This._thismap = Thismap; }//Inherit API Bmap.overlay Squareoverlay.prototype = new Bmap.overlay (); Implementation initialization Method SquareOverlay.prototype.initialize = function (map) {//Save Map Object instance This._map = Map ; Create DIV element as a container for custom overlays var div = document.createelement ("div"); var divline = This.divline = document.createelement ("div"); Create a link var Divdel = This.divdel = document.createelement ("div"); DivLine.style.height = DivDel.style.height = "30px"; DivLine.style.lineHeight = DivDel.style.lineHeight = "30px"; Divline.appendchild (document.createTextNode ("Connection")); Divdel.appendchild (document.createTextNode ("delete")); Div.appendchild (Divline); Add to Div div.appendchild (Divdel); Add to div div.style.position = "absolute"; The appearance of elements can be set according to the parameters//Div.style.display = "None"; Div.style.width = this._length + "px"; Div.style.height = this._length + "px"; Div.style.background = "White"; Add div to the overlay container map.getpanes (). Markerpane.appendchild (Div); Save div instance this._div = div; var = this; Connection Event Divline.onclick = function (e) {//e.domevent.stoppropagation (); Window.event.preventDefault (); if (e && e.stoppropagation) {e.stoppropagation (); } else {window.event.cancelBubble = true; } That._div.style.display = "None"; Map.addoverlay (MySQUARE); Console.log (That._center); } Divdel.onclick = function (e) {//e.domevent.stoppropagation (); Window.event.preventDefault (); if (e && e.stoppropagation) {E. Stoppropagation (); } else {window.event.cancelBubble = true; }//That._thismap.removeoverlay (square[0]); Alert ("delete"); The div element is required as the return value of the method, and the API will manipulate this element when the show,//Hide method for the overlay is called, or the overlay is removed. return div; }//Implement drawing Method SquareOverlay.prototype.draw = function () {//convert to pixel coordinates based on geographic coordinates and set to container var Position = This._map.pointtooverlaypixel (this._center); This._div.style.left = + POSITION.X-THIS._LENGTH/2 + "px"; This._div.style.top = position.y-this._length/2 + "px"; }//Implement display Method SquareOverlay.prototype.show = function () {if (this._div) {This._div . style.display = ""; }}//implement hidden Method SquareOverlay.prototype.hide = function () {if (this._div) {th Is._div.style.display = "None"; } }//Add a custom method SquareOverlay.prototype.toggle = function () {if (This._div) {if (this._d Iv.style.display = = "") {this.hide (); } else {this.show (); }}}//----------------//Arrow methods refer to Post address http://blog.csdn.net/baidulbs/article/details/8571961 function ad Darrow (polyline, length, anglevalue) {//The function of drawing arrows var linepoint = Polyline.getpath ();//Line's coordinate string var Arrowco UNT = Linepoint.length; for (var i = 1; i < Arrowcount; i++) {//Draw arrows at inflection point var Pixelstart = Map.pointtopixel (linepoint[i-1]); var pixelend = Map.pointtopixel (Linepoint[i]); var angle = Anglevalue; The angle of the arrow and the main line var r = length; R/math.sin (angle) represents the arrow length var delta = 0; Main Line slope, no slope at vertical var param = 0; Code simple consider Var pixeltemx, Pixeltemy; Temporary point coordinates var pixelx, PixelY, pixelX1, pixelY1; Arrow two points if (pixelend.X-pixelstart.x = = 0) {//slope does not exist when pixeltemx = pixelend.x; if (Pixelend.y > Pixelstart.y) {pixeltemy = Pixelend.y-r; } else {pixeltemy = pixelend.y + R; }//Known right triangle two point coordinates and one corner, ask for another point coordinate algorithm pixelx = pixeltemx-r * Math.tan (angle); pixelX1 = pixeltemx + R * Math.tan (angle); PixelY = PixelY1 = Pixeltemy; } else//slope exists {delta = (PIXELEND.Y-PIXELSTART.Y)/(Pixelend.x-pixelstart.x); param = math.sqrt (Delta * delta + 1); if ((Pixelend.x-pixelstart.x) < 0)//second to third quadrant {pixeltemx = pixelend.x + R/param; Pixeltemy = pixelend.y + Delta * R/PARAM; } else//first to fourth quadrant {pixeltemx = pixelend.x-r/param; Pixeltemy = Pixelend.y-delTA * r/param; }//Known right triangle two point coordinates and one corner, ask for another point coordinate algorithm pixelx = pixeltemx + Math.tan (angle) * R * Delta/param ; PixelY = Pixeltemy-math.tan (angle) * R/PARAM; pixelX1 = Pixeltemx-math.tan (angle) * R * DELTA/PARAM; pixelY1 = Pixeltemy + Math.tan (angle) * R/PARAM; } var pointarrow = Map.pixeltopoint (New Bmap.pixel (Pixelx, PixelY)); var pointArrow1 = map.pixeltopoint (New Bmap.pixel (pixelX1, pixelY1)); var Arrow = new Bmap.polyline ([Pointarrow, Linepoint[i], PointArrow1 ], {strokecolor: "Red", Strokeweight:3, strokeopacity:0.5} ); Map.addoverlay (Arrow); return Arrow; } }});
JS Code: Http://download.csdn.net/my
Baidu Map Multi-point to connect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
