"Gold Map API" from scratch to learn the German JS API (ii) Map control and plug-in-ranging, circular editor, mouse tools, map type switch, eagle eye fish Bone

Original: "Gold Map API" from scratch to learn the German JS API (ii) Map control and plug-in-ranging, circular editor, mouse tools, map type switch, eagle eye fish Bone

Absrtact: Whether it is a control or plug-in, is based on a first-level API interface, the development of two, encapsulated a series of more convenient for developers to use, reduce the developer workload of the level two API interface. In addition to the official fish bones, Eagle Eye control, there are a large number of officially developed map plugins, similar to Google's lib. Of course, this article also describes the use of custom plug-ins.

-------------------------------------------------------------------------------------------------

The first part of the control

The currently supported controls include: Zoom control bar-Map toolbar (ToolBar), thumbnail-Eagle Eye (Overview), scale bar.

The reason that these three controls are put together is because they operate almost the same way, adding controls using plugin, and then having the show and hide methods.

Preview Map:

1. Zoom control Bar-Map toolbar (ToolBar)

Toolbars have many effects, such as hiding rulers, hiding directional keyboards, and even HTML5 positioning.

To add fish bones:

Mapobj.plugin (["Amap.toolbar"],function() {   // add ToolBar plug      -in to the map        New  Amap.toolbar ();          Mapobj.addcontrol (ToolBar);           });  

Remove fish bones:

Toolbar.hide ();

Complete Fish bone:

    Toolbar.show ();    Toolbar.showruler ();    Toolbar.showdirection ();

Only the steering wheel:

    Toolbar.show ();    Toolbar.showdirection ();            Toolbar.hideruler ();

Only the long ruler:

    Toolbar.show ();    Toolbar.hidedirection ();    Toolbar.showruler ();

Only the short ruler:

    Toolbar.show ();    Toolbar.hideruler ();    Toolbar.hidedirection ();

2. Thumbnail image-Eagle Eye (Overview)

You can set whether the Eagle eye is open or not. Display is isopen:true;

Open as shown below on the left open (), close the shape as shown in the right close ().

Mapobj.plugin (["Amap.overview"],function() {  // Add Eagle Eye Plugin  to the map /        / Loading Eagle Eye          New Amap.overview ({              visible:true// Initialize show Hawkeye           });          Mapobj.addcontrol (overview);           // Expand Eagle Eye    });   

3. Scale

Mapobj.plugin (["Amap.scale"],function() {    // load Bar plug      -in        new  Amap.scale ();          Mapobj.addcontrol (scale);          Scale.show ();    });  

------------------------------------------------------------------------------------------------

Part II: Plugins

The official development of plugins are: Circular editing plug-in (Amap.circleeditor), polyline, polygon editing plug-in (Amap.polyeditor), mouse tool plug-in (Amap.mousetool), distance measurement plug-in (Amap.rangingtool), Map type Toggle plug-in (Amap.maptype).

1. Circle Edit plugin (amap.circleeditor)

Add a circle

New Amap.circle ({   // Circle Editor style         map:mapobj,          Center:New Amap.lnglat (" 116.40332221984863 "," 39.90025505675715 "),          radius:+,          " #F33 ",          1 ,           3,          "ee2200",          0.35      });

Open Editor

Mapobj.plugin (["Amap.circleeditor"],function() {           new amap.circleeditor (Mapobj, circle);   // Create a Circle Editor object        Circleeditor.open ();    // Open the Circle editor    

Close Editor

Circleeditor.close ();

Remove Circle

Circle.hide ();

Circle Editor:

2, polyline, polygon editing plug-in (Amap.polyeditor)

Adding polygons

varArr=NewArray ();//array of latitude and longitude coordinatesArr.push (NewAmap.lnglat ("116.403322", "39.920255")); Arr.push (NewAmap.lnglat ("116.410703", "39.897555")); Arr.push (NewAmap.lnglat ("116.402292", "39.892353")); Arr.push (NewAmap.lnglat ("116.389846", "39.891365")); Polygon=NewAmap.polygon ({path:arr,//array of nodes that set the polygon outlineStrokecolor: "#0000ff", strokeopacity:0.2, Strokeweight:3, FillColor:"#f5deb3", fillopacity:0.35     }); //add polygons to the mapMapobj.addoverlays (Polygon);

Turn on the Polygon editor

// constructs a polygon edit object and opens the edit state    of the polygon Mapobj.plugin (["Amap.polyeditor"],function() {        new  amap.polyeditor (Mapobj, Polygon);         Polygoneditor.open ();     

Close the Polygon editor and remove the polygon

    Polygoneditor.close ();    Polygon.hide ();

Polygon Editor:

3, Mouse tool plug-in (Amap.mousetool)

There are 9 kinds of mouse tools, and there is a chestnut in one swoop.

Add Mouse tool

Mapobj.plugin (["Amap.mousetool"],function() {        // Mouse Tool plug-in        new  Amap.mousetool (mapobj);                 });

Chestnut 1: Mouse snap tool

// Use the mouse tool to draw marker points on the map

Chestnut 2: Mouse ranging Tool

Mousetool.measurearea ();

Chestnut 3: Mouse Draw Round

Mousetool.circle ();

Chestnut 4: Mouse Draw Rectangle

Mousetool.rectangle ();

......

......

......

After a few examples, we look at the class reference, directly change the class name on the line.

Turn off the mouse tool

Mousetool.close (true);

4, distance measurement plug (amap.rangingtool)

Create a ranging plug-in and hide it first.

    Mapobj.plugin (["Amap.rangingtool"],function() {           new  Amap.rangingtool (mapobj);           AMap.event.addListener (ruler,"End",function(e) {              ruler.turnoff ();           });              

Open and display the rangefinder tool

Ruler.turnon ();

Hide Ranging tool

Ruler.turnoff (); Mapobj.clearmap ();

Preview effect

5. Map Type Switch plugin (amap.maptype)

Mapobj.plugin (["Amap.maptype"],function() {  ////         map type Toggle          New amap.maptype ({defaulttype:2,showroad:true});          Mapobj.addcontrol (Maptype);      });

Preview

----------------------------------------------------------------------------------------------------------

Part III: Custom Plugins

First define a namespace

// defines a plug-in class Homecontroldiv,amap as                  a namespace amap.homecontroldiv=function() {                  

Then fill in your content, including features, events

AMap.homeControlDiv.prototype ={addto:function(map, DOM) {Dom.appendchild ( This. _gethtmldom (map)); }, _gethtmldom:function(map) { This. map=map; //Create a <div> container that can host controls     varControlui=document.createelement ("DIV"); ControlUI.style.width= ' 80px ';//to set the width of a control containercontrolui.style.height= ' 20px ';//set the height of the control containerControlui.style.backgroundcolor= ' White '; ControlUI.style.borderStyle= ' Solid '; ControlUI.style.borderWidth= ' 2px '; ControlUI.style.cursor= ' pointer '; ControlUI.style.textAlign= ' Center '; //set the position of the controlcontrolui.style.position= ' Absolute '; ControlUI.style.left= ' 120px ';//sets the offset of the control from the left edge of the mapcontrolui.style.top= ' 5px ';//sets the offset of the control from the top edge of the mapcontrolui.style.zindex= ' 300 ';//setting controls to display on a map                  //Set Control font styleControlui.style.fontfamily= ' Arial,sens-serif '; ControlUI.style.fontSize= ' 12px '; ControlUI.style.paddingLeft= ' 4px '; ControlUI.style.paddingRight= ' 4px '; Controlui.innerhtml= "Back to center"; //Set Control Response Click OnClick eventControlui.onclick =function() {Map.setcenter (NewAmap.lnglat (116.404, 39.915)); }                       returnControlui; }                  }   

Finally, add this control to the map:

var homecontrol=New// New Custom plug-in  object Mapobj.addcontrol (Homecontrol);                  // Add plugins  on the map

Hide this custom control: (Hides the control's entire div directly)

Controlui.style.display= ' None ';

------------------------------------------------------------------------------------------------------

Part IV: Effect display

Http://zhaoziang.com/amap/zero_2_1.html

"Gold Map API" from scratch to learn the German JS API (ii) Map control and plug-in-ranging, circular editor, mouse tools, map type switch, eagle eye fish Bone