Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "wen development Amap WEB version of the basic control example analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "wen development Amap WEB version of the basic control example analysis" this article.

Before I wanted to do a tourism navigation project by myself, I found Amap's open platform in a search on the Internet. I found that Gao de could easily be applied to his own project. Immediately I applied a key to learn and studied it carefully. I found it difficult to find a case on the Internet. Over the past few days, the editor almost got some of Gaud's basic controls. The effect image is shown in the following figure:

No more nonsense, just go to the source code, here is the js code:

/ / introduce Amap API var mapObj;var scale;var mapType;var toolBar;var overView;var circleEditor;var circle;var polygonEditor;var polygon;var homeControl;var controlUI;var ruler;var mousetool;// to refresh the page function reload () {location.reload () } function mapInit () {mapObj = new AMap.Map ("iCenter", {center:new AMap.LngLat (116.397728 center:new AMap.LngLat 39.90423), / / map center point level:13, / / map display scale level}); mapObj.plugin (["AMap.ToolBar"], function () {/ / add ToolBar plug-in toolBar = new AMap.ToolBar (); mapObj.addControl (toolBar);}) MapObj.plugin (["AMap.Scale"], function () {/ / load scale plug-in scale = new AMap.Scale (); mapObj.addControl (scale); scale.show ();}); mapObj.plugin (["AMap.OverView"], function () {/ / add Hawkeye plug-in to the map / / load Hawkeye overView = new AMap.OverView ({visible:true / / initialize Hawkeye}); mapObj.addControl (overView) OverView.open (); / / expand Hawkeye}); mapObj.plugin (["AMap.RangingTool"], function () {ruler = new AMap.RangingTool (mapObj); AMap.event.addListener (ruler, "end", function (e) {ruler.turnOff ();});}) MapObj.plugin (["AMap.MouseTool"], function () {/ / mouse tool plug-in mousetool = new AMap.MouseTool (mapObj);});} function Coordinate () {AMap.event.addListener (mapObj,'click',getLnglat); / / Click event} function toolBarShow () {toolBar.show (); toolBar.showRuler (); toolBar.showDirection () } function toolBarDirection () {toolBar.show (); toolBar.showDirection (); toolBar.hideRuler ();} function toolBarLong () {toolBar.show (); toolBar.hideDirection (); toolBar.showRuler ();} function toolBarShot () {toolBar.show (); toolBar.hideRuler (); toolBar.hideDirection () } function iMapType () {mapObj.plugin (["AMap.MapType"], function () {/ / add a map type switch plug-in / / Map type switch mapType= new AMap.MapType ({defaultType:1,showRoad:true}); mapObj.addControl (mapType);});} function removeMapType () {mapObj.removeControl (mapType) } function iCircleEditor () {/ / Circular Editor circle = new AMap.Circle ({/ / Circular Editor style map: mapObj, center:new AMap.LngLat ("116.40332221984863", "39.90025505675715"), radius:1000, strokeColor: "# F33", strokeOpacity: 1, strokeWeight: 3 FillColor: "ee2200", fillOpacity: 0.35}) MapObj.plugin (["AMap.CircleEditor"], function () {circleEditor = new AMap.CircleEditor (mapObj,circle); / / create circle editor object circleEditor.open (); / / Open circle editor});} function removeCicleEditor () {/ / close circle editor, hide circle circleEditor.close (); circle.hide () } function iPloygonEditor () {/ / Edit polygon var arr=new Array (); / / Array of latitude and longitude coordinates arr.push (new AMap.LngLat ("116.403322", "39.920255"); arr.push (new AMap.LngLat ("116.410703", "39.897555"); arr.push (new AMap.LngLat ("116.402292", "39.892353")); arr.push (new AMap.LngLat ("116.389846", "39.891365") Polygon = new AMap.Polygon ({path:arr, / / set the node array of polygon contours strokeColor: "# 0000ff", strokeOpacity:0.2, strokeWeight:3, fillColor: "# f5deb3", fillOpacity: 0.35}); / / add polygon mapObj.addOverlays (polygon) to the map; / / construct polygon editing object and open polygon editing state mapObj.plugin (["AMap.PolyEditor"], function () {polygonEditor = new AMap.PolyEditor (mapObj,polygon)) PolygonEditor.open ();} function removePloygonEditor () {polygonEditor.close (); polygon.hide ();} AMap.homeControlp = function () {} AMap.homeControlp.prototype = {addTo: function (map, dom) {dom.appendChild (this._getHtmlDom (map));}, _ getHtmlDom:function (map) {this.map=map; / / create a

Container controlUI = document.createElement ("p"); controlUI.style.width='80px'; / / set the width of the control container controlUI.style.height='20px'; / / set the height of the control container controlUI.style.backgroundColor='white'; controlUI.style.borderStyle='solid'; controlUI.style.borderWidth='2px'; controlUI.style.cursor='pointer'; controlUI.style.textAlign='center'; / / set the location of the control controlUI.style.position='absolute'; controlUI.style.left='120px' / / set the offset of the control from the left boundary of the map controlUI.style.top='5px'; / / set the offset of the control from the boundary on the map controlUI.style.zIndex='300'; / / set the control to display / / set the font style of the control on the map controlUI.style.fontFamily='Arial,sens-serif'; controlUI.style.fontSize='12px'; controlUI.style.paddingLeft='4px'; controlUI.style.paddingRight='4px'; controlUI [XSS _ clean] = "change the center point" / / set control response to click onclick event controlUI.onclick = function () {map.setCenter (new AMap.LngLat (116.234404, 39.12915));} return controlUI;}} AMap.event.trigger (homeControlp, "hide"); AMap.event.addListener (homeControlp, "hide", function () {controlUI.style.display = 'none';}) function myControl () {homeControl = new AMap.homeControlp (mapObj) / / create a new custom plug-in object mapObj.addControl (homeControl); / / add plug-ins to the map} function removeMyControl () {homeControl.hide (); / / controlUI.style.display='none';} function iRangingTool () {ruler.turnOn ();} function removeRangingTool () {ruler.turnOff (); mapObj.clearMap (); / / ruler.hide (); / / ruler.setMap (null) / / mapObj.removeControl (ruler);} function iMarker () {mousetool.marker (); / / use the mouse tool to mark a point on the map} function iMeasureArea () {mousetool.measureArea ();} function iRectZoomIn () {mousetool.rectZoomIn ();} function iRectZoomOut () {mousetool.rectZoomOut ();} function iPolyline () {mousetool.polyline ();} function iPolygon () {mousetool.polygon () } function iCircle () {mousetool.circle ();} function iRectangle () {mousetool.rectangle ();} function iRule () {mousetool.rule ();} function removeMouseTool () {mousetool.close (true);} function geocoder () {var MGeocoder; / / load geocoding plug-in mapObj.plugin (["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder ({radius: 1000, extensions: "all"}) / / return geocoding result AMap.event.addListener (MGeocoder, "complete", geocoder_CallBack); / / inverse geocoding MGeocoder.getAddress (lnglatXY);}) / / add var marker = new AMap.Marker ({map:mapObj, icon: new AMap.Icon ({image: "http://api.amap.com/Public/images/js/mark.png", size:new AMap.Size (58 Magazine 30), imageOffset: new AMap.Pixel (- 32,-0)}), position: lnglatXY, offset: new AMap.Pixel (- 5Ling Ling 30)}); / / mapObj.setFitView ();} / callback function function geocoder_CallBack (data) {var address / / return address description address = data.regeocode.formattedAddress; / / return result stitching output document.getElementById ("iAddress") [xss_clean] = address;} / / Click the mouse to get the latitude and longitude coordinates function getLnglat (e) {mapObj.clearMap (); var x = e.lnglat.getLng (); var y = e.lnglat.getLat (); document.getElementById ("lnglat") [xss_clean] = x + "," + y LnglatXY = new AMap.LngLat (xQuery y); geocoder ();}

Here is the HTML code:

Hide fishbone long ruler display scale display Hawkeye add map type toggle add circle editor mouse dotted tool mouse drawing polygon tool mouse drawing polygon tool mouse drawing circle tool mouse drawing rectangle tool mouse measuring area mouse box select and close mouse zoom in and out hidden ranging Remove custom controls

Cancel coordinate pickup

In the introduction of Amap API in the first line of js, the key value is created by myself in Amap and can also be used. You can also apply for the key value on the Gaode open platform to have a try.

Gaode Open platform: developer.amap.com/

The above is all the contents of the article "sample Analysis of Amap WEB basic controls in wen Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.