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