Introduction to the

Light and easy to use, function loading on demand, rich visualization, compatible with various browsers (PC, mobile)

The first map application

1. Register an account and apply for key lbs.amap.com/api/javascr…

2. Three ways

(1) <script SRC ='amap.com/maps?v=1.4&key=xx' /> <script> new ap.map (domId) </script> (2) Specify callback <script> Window.init =()=>{new amap.map (domId)} </script> <script SRC ='amap.com/maps?v=1.4&key=xx&callback=init' /> (3) <script SRC ='amap.com/maps?v=1.4&key=xx' /> window.onload=()=>{new amap.map (domId)}Copy the code

Map attributes

Map =new amap.map (domId,{zoom,// level, the smaller the number, the larger the display range, the less fine, center:[x,y],// center latitude and longitude resizeEnable // can change the size})Copy the code

Instance methods

Map.getzoom (), setZoom() // level map.getCenter(), setCenter() // Center(initial, SetZoomAndCenter () map.getCity(function(info){}) setZoomAndCenter() map.setCity(" ") Map.setbounds (new amap.bounds ([lower left, upper right]))// Just stretch the Bounds, Changes center and level map.setLimitBounds() // Limits the display range of the map (once dragged out of bounds, it immediately bounces back into the limit area) map.clearLimitBounds() map.panby (left distance, Map.panto (coordinates) map.setDefaultCursor('pointer') // Sets mouse styleCopy the code

The event

Map. on(",callback) event: moveEnd, zoomEnd, click map.on('click',e=>{})// Get the latitude and latitude of the mouseCopy the code

Load the plug-in

Method 1: Plugin (' amap.autocomplete ',function(){new amap.autocomplete ().search(' Beijing ',function(status,data){// Search for Beijing related}) })// Plugin mode 2: < script SRC = 'amap.com/maps?v=1.4&key=xx&callback=init&plugin=AMap.Autocomplete, AMap. PlaceSearch' / >Copy the code

Common map operations

Map search

New amap.autocomplete ({input:' input field ID '// specify input field ID, The plugin automatically generates the list search function, but clicking on an item does not center on the specified location.Copy the code

Map search combined with POI

Poi: I have a point of interest

Case 1

// Page address cannot be accessed through file protocol, Amap.service ([' amap.placesearch '],function(){ipt.onclick=function(){new amap.placesearch ({panel:domId, CityLimit :true, cityLimit:true, cityLimit:true, cityLimit:true, cityLimit:true, cityLimit:true PageIndex, type:' restaurant '}).search(ipt.value) // List #. SearchNearBy (' Beijing ', central point, radius distance, Function (){})Copy the code

Case 2

Var map=new amap.map (id,{}) var searchNode=new amap.autocomplete ({//** input:'searchIpt'}) Var placeSearch=new placap.placesearch ({map:map}) var placeSearch=new placap.placesearch ({map:map}) AddListener (searchNode,'select',function(e){// Click the search list item, Placesearch.search (e.poi.name) // Map jumps to the corresponding place, the point of interest is automatically marked})Copy the code

Add tag

marker = new AMap.Marker({ icon, Postion,// offset:new map. Pixel(-50,-50) // offset}) marker.setmap (map) or map.add([marker])Copy the code

Custom dot mark icon

Icon = new amap. icon ({size:new amap. size(500,500), image: "", ImageSize :new map.size () imageOffset:new map.pixel () // Clipoffset value}) // Text =new map.text ({text, postion }) text.setMap()Copy the code

Remove the tag

marker.setMap(null)
map.remove([marker])
Copy the code

Scale control

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.Scale,AMap.Toolbar' /> map.addControl(new amap.scale ()) // Scale Map.addcontrol (new amap.toolbar ()) // Zoom pan ToolbarCopy the code

2 d to 3 d conversion

< script SRC = 'amap.com/maps?v=1.4&key=xx&plugin=AMap.Scale, AMap. The ControlBar' / > new AMap. The Map ({viewMode: '3 d', / / 3 d Map Pitch: 90, / / Angle buildingAnimation: true, / / buildings to generate animation}) map. Add (new AMap. The ControlBar ({showZoomBar, // Whether to display level jump toolbar showControlButton, // whether to display rotation tool, no display compass position:{// control page position left, right,}})Copy the code

The route specified

Driving directions

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.Driving' /> driving= new amap. driving ({map, panel, // details (including travel time, Search ([{keyword:' Beijing ',city:' Beijing '} {keyword:' Beijing '}], Function (status,data){}) driv.search (new amap.lnglat (x,y),new amap.lnglat (x,y),function(){}Copy the code

Walking routes

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.Walking' /> walking=new amap. walking ({map,panel}) walking. Search ([ {keyword: 'Beijing south railway station, city:' Beijing '} {keyword: 'Beijing west railway station, city:' Beijing '}]. Function (status,data){}) walking. Search ([x,y],[x,y],function(){}Copy the code

Truck routes

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.TrunkDriving' /> trunkDriving=new amap. trunkDriving ({map, panel, city, size }) trunkDriving.search([ {lnglat,lnglat:[x,y]}, {lnglat,lnglat}],function(){}) trunkdriv.search ([{keyword,city}, {keyword,city},])Copy the code

Cycling route

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.Riding' /> riding=new amap. riding ({map, panel }) riding.search([ {keyword,city} {keyword,city} ]) riding.search(new AMap.LngLat(x,y),new AMap. LngLat (x, y), function () {}) riding. Search ((x, y), (x, y), function () {}) / / no [1, coordinate 2, 3] coordinateCopy the code

Bus (subway) route

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.Transfer' /> Transfer =new amap. transfer ({map, panel, Transfer. Search ([{keyword,city}]) transfer. Search ([x,y],[x,y]) transfer. transfer.search(new AMap.LngLat(x,y),new AMap.LngLat(x,y),function(){})Copy the code

controls

The map type

<script SRC ='amap.com/maps?v=1.4&key=xx&plugin=AMap.MypeType' /> mypeType= new amap. mypeType ({default:0//0 default, 1 satellite showRoad // display visible, // display) map.addControl(mypeType)Copy the code

Other controls

Amap. Scale amap. ToolBarCopy the code

Controls are added and removed

Control. Hide () | control. The show ()/show/hide

The event system

map.on(event,function)

Triggered when internal map status changes

When the map block is loaded, you can get various map states (center point, Zoom level) zoomstart | zoomend / / map zoom registration change triggers, setZoom zoomIn zoomOut trigger mapmove | movestart | moveend translation triggered, Setenter,panTo,panBy can also trigger resize after the Map container size changes, browser window changes, or DOM container changes. This event can only be triggered correctly when Map. ResizeEnable is enabledCopy the code

An event triggered by a change in the state of a covering

Marker, the Text object

On ('mouseout',function) text.on('mouseout',function) text.on('mouseout',function) text.on('mouseout',function) text.on('mousemove',function)Copy the code

Vector graphics shown, hidden

// Circle,Rectangle Circle =new amap.circle ({center, radius}) Circle.setMap(map)Copy the code

ContextMenu class object opens and closes

open,close, ContextMenu =new amap.contextMenu (); function(){ContextMenu =new amap.contextMenu (); Map.zoomin ()}) map.on('rightclick',function(e){contextmenu.open(map, e.lglat Contextmenu.close () // Hide menu})Copy the code

Dom events

Listen1 = AMap. Event. AddDomListener (dom event, fn) / / binding approach AMap) event, removeListener (listen1) / / solution methodCopy the code

Custom events

Amap.event.addlistener or map object on map.on('count',fn) emit: map object emit map.emit('count',params)Copy the code