Map Viewer API
Map Viewer API Example
Name Space
AMap is the namespace of Alibaba LBS JS API. All the classes and objects are called by AMap.XXX
For instance, to construct a LngLat object:
new AMap.LngLat(116.397428,39.90923);
Map Class
Function: Map class packages a set of function, like map display, user interaction, etc.
[Constructor]
// To create a Map object
Map(Node mapDiv, MapOptions opts)
Params:
- mapDiv: type Node, which is the ID value of map container
- opts: type MapOptions, carrying the list of map initialization parameters
MapOptions
| Map Options | Type | Description |
|---|---|---|
| view | View2D | Map view port, to control the attributes that will affect the static display of map, like ‘center’, to control the center of map |
| layers | Array | Array of map layers. Default map layer is 2D map |
| zoom | Number | Zoom level |
| center | LngLat | Coordinate value of map center |
| zooms | Array | Zoom level range, like [3,19] |
| lang | String | Displaying language |
| crs | String | Reference coordinate system for map view, 'EPSG3857‘, 'EPSG3395‘, 'EPSG4326‘. Default is 'EPSG3857‘ |
| animateEnable | Boolean | Whether to enable animate during map panning, default is true |
| isHotspot | Boolean | Whether to open map hotspot, default is false |
| defaultlayer | Tilelayer | Default map layer of current map. It can be system tile map like TileLayer.Satellite, or the custom tile map defined by TileLayer |
| rotateEnable | Boolean | Whether map can be rotated, default is false |
| resizeEnable | Boolean | Whether to monitor the change of map container size, default is false |
| dragEnable | Boolean | Whether map can be dragged or panned, default is true |
| zoomEnable | Boolean | Whether map can be zoomed, default is true |
| jogEnable | Boolean | Whether to use jog effect, default is true |
| touchZoom | Boolean | Whether map can be zoomed by multi-touch gestures |
| feature | Array | Elements type displayed in map, supporting bg (background), point (POI), road, building |
Map Class - Methods
| Method | Return | Description |
|---|---|---|
| getZoom() | Number | Get the zoom level |
| getLayers() | Array | Get the array of map layers |
| getCenter() | LngLat | Get the coordinate value of map center point |
| getCity(callback: function(result)) | Object | Get the region info regarding center of map, including province, city, citycode, district |
| getBounds() | Bounds | Get the display bounds of current map |
| getLimitBounds() | Bounds | Get the map limit bounds |
| getLang() | String | Get the language type of map |
| getSize() | Size | Get the pixel of map container |
| getRotation() | Number | Get the clockwise rotation angle of map |
| getStatus() | Object | Get the status info of map, including status of map option such as rotateEnable, resizeEnable, dragEnable, dragEnable, zoomEnable, jogEnable, touchZoom, etc |
| getResolution(LngLat point) | Number | Get resolution of given point, unit is meter per pixel. If point is unset, then return the resolution of map |
| getScale(Number dpi) | Number | Get the scale of map. Return the reciprocal of scale value of map center point |
| setZoom(Number level) | Void | Set the zoom level |
| setLayers(Array layers) | Void | Set the array of map layers |
| setCenter(LngLat position) | Void | Set the coordinate value of map center point |
| setCity(String city) | Void | Set the map center point according to administrative region |
| setBounds(Bounds bound) | Void | Set the display bounds of current map |
| setLimitBounds(Bounds bound) | Void | Set the map limit bounds |
| clearLimitBounds() | Void | Clear the map limit bounds |
| setLang(String lang) | Void | Set the language type of map |
| setRotation(Number rotation) | Void | Set the clockwise rotation angle of map |
| setStatus(Object status) | Void | Set the status info of map, including status of map option such as rotateEnable, resizeEnable, dragEnable, dragEnable, zoomEnable, jogEnable, touchZoom, etc |
| zoomIn() | Void | Zoom in map |
| zoomOut() | Void | Zoom out map |
| panTo(LngLat position) | Void | Pan the map center point to given position |
| panBy(Number x, Number y) | Void | Pan the map along x direction and y direction, by pixel. x is positive rightward, y is positive downward |
| setFitView(Array overlayList) | Void | Set the zoom level and panning to a suitable degree, according to overlay map layers array overlayList |
| clearMap() | Void | Clear all the overlay layers in map |
| destroy() | Void | Destroy the map object and clear the map container |
| setFeatures(Array feature) | Void | Set elements type displayed in map, supporting bg (background), point (POI), road, building |
| getFeatures() | Array | Get elements type displayed in map, supporting bg (background), point (POI), road, building |
View2D Class
[Constructor]
// To create a 2D map view port object
View2D(View2DOptions opts)
Params:
- opts: type View2DOptions, carrying the list of 2D map view initialization parameters
| View2DOptions | Type | Description |
|---|---|---|
| center | LngLat | Coordinate value of map center |
| rotation | Number | Clockwise rotation angle of map |
| zoom | Number | Zoom level |
| crs | String | Reference coordinate system for map view, 'EPSG3857‘, 'EPSG3395‘, 'EPSG4326‘. Default is 'EPSG3857‘ |
LngLat Class
[Constructor]
// To create a LngLat object
LngLat(Number lng, Number lat)
Params:
- lng: longitude value
- lat: latitude value
| Method | Return | Description |
|---|---|---|
| offset(Number w, Number s) | LngLat | Get new coordinate value by moving w meters in longitude and s meters in latitude. w is positive rightward, s is positive upward |
| distance(LngLat lnglat) | Number | Get the distance by meter between current lnglat and this passed-in lnglat |
| getLng() | Float | Get longitude |
| getLat() | Float | Get latitude |
| equals() | Boolean | Whether the current lnglat equals this passed-in lnglat |
TileLayer Class
[Constructor]
// To create a tile layer object
TileLayer(TileLayerOptions tileOpt)
Params:
- tileOpt: type TileLayerOptions, carrying the list of tile layer initialization parameters
| TileLayerOptions | Type | Description |
|---|---|---|
| map | Map | The map object that will display the tile layer |
| tileSize | Number | Tile layer size. 256 (default): 256*256; 128: 128*128; 64: 64:64 |
| tileUrl | String | Url of obtaining tile layer |
| errorUrl | String | Error Url if obtaining tile layer fails |
| zIndex | String | Order of tile layer overlay. 0 means the bottom. Default is 1 |
| opacity | Float | 0 means opaque; 1 means transparent |
| zooms | Array | Zoom level range |
| Method | Return | Description |
|---|---|---|
| setOpacity(Float alpha) | Void | Set tile layer opacity option |
| show() | Void | Show the tile layer on map |
| hide() | Void | Hide the tile layer on map |
| getTiles() | Array | Get all the tile layers index |
| reload() | Void | Reload the tile layer |
| setTileUrl(String url) | Void | Set the tileUrl option |
| getZooms() | Array | Get the zooms option |
| setzIndex(Number index) | Void | Set the zIndex option |
| setMap(Map map) | Void | Set the map option |
Bounds Class
[Constructor]
// To create a Bounds object,which is a rectangle
Bounds(LngLat southWest, LngLat northEast)
Params:
- southWest : longitude value of rectangle southwest point
- northEast: latitude value of rectangle northeast point
| Method | Return | Description |
|---|---|---|
| contains(LngLat point) | Boolean | Whether the passed-in point is within the range of rectangle |
| getCenter() | LngLat | Get coordinate value of bounds center point |
| getSouthWest() | LngLat | Get southwest coordinate value of bounds |
| getNorthEast() | LngLat | Get northeast coordinate value of bounds |
Size Class
[Constructor]
// To create a Size object, which is the pixel size of map obejct
Size(Number width, Number height)
Params:
- width: unit is pixel
- height: unit is pixel
| Method | Return | Description |
|---|---|---|
| getWidth() | Number | Get width value |
| getHeight() | Number | Get height value |
Map Viewer Example
// Map display
//Initial Map object, and load map
var map = new AMap.Map('mapContainer',{ //id of map container
resizeEnable: true,
//2D map view port object
view: new AMap.View2D({
//Set map center point
center: new AMap.LngLat(116.397428, 39.90923),
//Set zoom level
zoom: 12
})
});