The use of the AMap JavaScript API __java

Click to open Link reprint: Application JSAPI Developer Key

Application Address: Http://lbs.amap.com/dev/key

introduction of the German map JavaScript API file:

<script type= "Text/javascript" src= "http://webapi.amap.com/maps?v=1.3&key= your requested key value" ></script> 

Create a map container

Where you want to show the map in the body of the page create a div container and specify an ID identity:

<div id= "Container" ></div>  

Specify container size

Set the size of the map container as needed to make sure it is the right size, such as setting it with CSS:

#container {width:300px; height:180px;}  

 

Create a map

set the center point and level of the map

We generally need to set the map on the need for central points and coordinates and other attributes, there are two ways, the first, directly in the map initialization when the relevant properties, center attribute value can make the latitude and longitude of the two-yuan array, can also be Amap.lnglat object, required longitude value in the former, latitude value after:

    var map = new Amap.map (' container ', {
        zoom:10,
        Center: [116.39,39.9]
    });

You can also change the center point and the level of the map wherever you need it after the map is initialized

    var map = new Amap.map (' container ');
    Map.setzoom (ten);
    Map.setcenter ([116.39,39.9]);

Map Basic parameters:

Layers	Array	An array of map layers, which can be one or more of the layers
Zoom	Number	Map Display zoom level, if center and levels are not assigned value, map initialization default display user City range
Center	Lnglat	Map Center Point coordinate value (changed from V1.3.0 to center attribute in view object)
Zooms	Array	Map display zoom level range, on PC, default to [3,18], take value range [3-18]; On mobile devices, default to [3-19], value range [3-19]
Lang	String	Map language type, Optional value: ZH_CN: Chinese Simplified, en: English, Zh_en: Bilingual
Cursor	String	Map default mouse style. parameter cursor should conform to CSS Cursor attribute specification
Animateenable	Boolean	Whether to use animations during map translation (such as calling Panby, panto, setcenter, setzoomandcenter, etc.)
Ishotspot	Boolean	Whether to turn on the map hotspot, the default false does not open (new from v1.3)
Rotateenable	Boolean	Map can rotate, default false (new from v1.3)
Resizeenable	Boolean	Whether to monitor the map container size change, the default value is False
Dragenable	Boolean	The default is true if the map can be dragged and dropped by the mouse. This property can be controlled by the Setstatus/getstatus method
Zoomenable	Boolean	The map is scalable and the default value is true. This property can be controlled by the Setstatus/getstatus method
Doubleclickzoom	Boolean	Whether the map can be enlarged by double-clicking the mouse, the default is true. This property can be controlled by the Setstatus/getstatus method
Keyboardenable	Boolean	Map can be controlled by keyboard, key control map translation, "+" and "-" can control the zoom map
Jogenable	Boolean	If the map uses easing effects, the default value is true. This property can be controlled by the Setstatus/getstatus method
Scrollwheel	Boolean	Whether the map can be zoomed through the mouse wheel is true by default. This property can be controlled by the Setstatus/getstatus method
Touchzoom	Boolean	Whether the map can browse the map via multi-touch Zoom on the mobile terminal, default to True
Mapstyle	String	Set map style, support normal (default style), Dark (dark Style), light (light style), fresh (OSM style)
Features	Array	Set the type of elements shown on the map, support BG (map background), point (points of interest), Road (road), Building (building)

Add dot marker

Once we have created the map, we can add a dot mark on the map to mark the location and information that any user is interested in, using the Amap.marker class.

creation and addition of point tags

As with maps, the dot mark can be set at the time of creation of attributes such as location, if the Map property is set, the marker point will be immediately added to the map:

    var marker = new Amap.marker ({
        position: [116.480983, 39.989628],
        map:map
    });

You can also change these properties on demand after you create them:

    var marker = new Amap.marker ();
    Marker.setmap (map);

the removal of a point tag

If you remove it, use the Setmap method, without passing parameters or passing in null arguments:

    Marker.setmap ();

Marker Parameter Details

Parameter name	type	Description
Map	Map	To display the map object for the marker
Position	Lnglat	Point mark location on map, default to map center point
Offset	Pixel	The position offset, the default value is pixel ( -10,-34). (0,0) marker the position of the upper-left corner of the position, which indicates how many pixels to move marker, you can align the anchor point to the position
Icon	String/icon	The icon that needs to be displayed in the point tag. Can be a local icon address, or an Icon object. This property is invalid when there is a valid content contents
Content	String/object	The point tag displays content, which can be an HTML element string or an HTML DOM object. The Icon property is overwritten when the content is valid
Topwhenclick	Boolean	When the mouse clicks marker is the top, the default false, does not have the topmost (since v1.3 add)
Topwhenmouseover	Boolean	Marker when mouse is moved, default false, not top (new from v1.3)
Draggable	Boolean	Sets whether the point mark can be dragged and moved, and the default is False
Raiseondrag	Boolean	To set the effect of a point mark to leave a map when dragging a point marker
Cursor	String	Specifies the mouse style for mouse hover, custom Cursor,ie only supports Cur/ani/ico format, opera does not support custom cursor
Visible	Boolean	The point mark is visible and the default is True
ZIndex	Number	The stacking order of the point markers. When multiple dot-marker overlays exist on a map, this property enables higher-level point markers to appear on the top, with the default 100
Angle	Number	The rotation angle of the point marker supports IE9 and above versions
Autorotation	Boolean	Whether to rotate automatically. Point mark when using Movealong animation, if the path direction changes, the point marker automatically adjusts the angle, the default FALSE,IE8 the following does not support
Animation	String	The animation effect of the dot marker, default value: "Amap_animation_none". Optional value: "Amap_animation_none", no animation effect, "Amap_animation_drop", point mark drop effect; "amap_animation_bounce", dot-mark bounce effect
Shadow	Icon	Point marker Shadow, without setting this property, dot marker no shadow
Title	String	Mouse over the point mark when the text prompts, do not set the mouse over the point sign without text hint
Clickable	Boolean	Point mark is clickable
Bubble	Boolean	The default False,true event can penetrate to the map
Shape	Markershape	Set the clickable area of the marker to trigger the marker mouse click event within the defined area
Extdata	Any	User-defined attributes that support any data type of the JavaScript API, such as marker ID, etc.

the method of marker

 

Method	return value	Description
GetOffset ()	Pixel	Get marker offset (new from v1.3)
SetOffset (Offset:pixel)		Set marker offset (new from v1.3)
Setanimation (animate:string)		To set the animation effect of a dot marker
Getanimation ()	String	Get the animation effect type of a dot marker
Setclickable (Clickable:boolean)		Set point mark is to support mouse click events
Getclickable ()	Boolean	Gets whether the dot marker supports mouse click events
GetPosition ()	Lnglat	Get position of point marker
SetPosition (Lnglat:lnglat)		Set point mark Location
Setangle (Angle:number)		Set the rotation angle of the point marker
Getangle ()	Number	Gets the rotation angle of the point marker
Setzindex (Index:number)		Sets the stacking order of point markers, with the first point tag added at the bottom of the default
SetIcon (Content:string/icon)		Set the display icon for a point marker
GetIcon ()	String/icon	Gets the icon content when the point mark does not have a custom image
Setdraggable (Draggable:boolean)		Sets whether a point tag object can be dragged and moved
Getdraggable ()	Boolean	Gets whether the point tag object can be dragged and moved
Hide ()		Point Mark Hide
Show ()		Dot marker Display
SetCursor (Cursor)	String	Sets the cursor when the mouse hovers. Parameter cur can be a cursor style in a CSS callout
SetContent (Html:string|htmldom)		The set point tag displays content, which can be an HTML element string or an HTML DOM object
GetContent ()	String	Get point mark Content
Movealong (lnglatlist,speed,f,circlable)		At the specified speed, the point marker moves along the specified path. The parameter lnglats is a path coordinate string; Speed is a specified speed, the unit: kilometer/hour; The callback function f can add a custom feature; The parameter loop indicates whether the animation is looping, and the default is False
MoveTo (lnglat,speed,function)		Moves the point to the specified position at a given speed. Parameter Lnglat is a specified position, must be set, speed is a specified speed, Unit: kilometer/hour; callback function f Add custom functionality
Stopmove ()		Point marker Stop Animation
Setmap (Map:map)		Specifies the target display map for the marker. The current marker:setmap (null) is removed from the map when the parameter value is NULL
Getmap ()	Map	Get marker Location Diagram Object
Settitle (title:string)		Text hint when the mouse is over the dot mark
GetTitle ()	String	Get text hints for point marks
Settop (Istop:boolean)		When there are multiple marker on the map, when Istop is true, marker is displayed at the front, and when false, marker cancels the top
GetTop ()	Boolean
Setshadow (Icon:icon)		Set shadow effects for marker
Getshadow ()	Icon	Get the shadow icon for marker
Setshape (Shape:markershape)		Set the clickable region of the marker
Getshape ()	Markershape	Get the clickable area of the marker
Setextdata (Ext:any)		Set user custom properties, support JavaScript API arbitrary data type, such as marker ID, etc.
Getextdata ()	Any	Get user Custom properties

 

Add Information Form

We can also use the Information Form Infowindow class to show users some more detailed information, such as clicking a point tag, through the information form to show where the point mark

creation and setting of information forms

Information forms can be created by setting the content, offset, size, and other attributes, offset is the information form's anchor point to position as the base position of the pixel offset, content in addition to using the form of strings can also be set directly to a created DOM node:

var Infowindow = new Amap.infowindow ({
     content: ' 
 
You can also change these properties on demand after you create them:

    Infowindow.setsize (New Amap.size (150,50));
    var contentdiv = document.createelement (' div ');
    Contentdiv.innertext= ' I am the Information form ';
    Infowindow.setcontent (CONTENTDIV);
 

How to open an information form

We can call its open method immediately after the information form is created to display it in the desired location:

Infowindow.open (map,new Amap.lnglat (116.480983, 39.989628));
 
You can also use event monitoring to display information forms when you need them, such as when marker is clicked

var clickhandle = AMap.event.addListener (marker, ' click ', Function () {
    infowindow2.open (map, Marker.getposition () )
})
 
When you no longer need to click marker to display the function of the information form, you can remove the event bindings in the following ways

AMap.event.removeListener (Clickhandle);
 

using advanced information forms

In addition to the common information forms, we also provide advanced information forms that encapsulate the perimeter search and route planning features, and to use the Advanced information form, you first need to load the plug-in through the plugin method, and then you can create and open it like a normal information form. If you set up a panel property for an advanced information form, the results of a perimeter search or route plan are displayed on a div with the value of the panel, and you can override the corresponding classname CSS if you need to modify the style of the Advanced Information Form and panel content:

Amap.plugin (' Amap.advancedinfowindow ', function () {
  var infowindow = new Amap.advancedinfowindow ({
    content: ' 
 

Add tool bars and scales

The high-Jsapi map provides a wealth of functional controls and service Plug-ins, and we'll add two commonly used controls, toolbars, and scales to the maps above.


Add

When adding a control, you first need to load the plug-in, and when you need multiple plug-ins, the first parameter can be set to an array of control names

Amap.plugin ([' Amap.toolbar ', ' Amap.scale '],function () {
    //todo  Create control and add
})
 
In the callback function we are going to build and add the control:

Amap.plugin ([' Amap.toolbar ', ' Amap.scale '],function () {
    var ToolBar = new Amap.toolbar ();
    var scale = new Amap.scale ();
    Map.addcontrol (ToolBar);
    Map.addcontrol (scale);
})
 

removed from

When you want to remove a control, call the Removecontrol method of the map

Map.removecontrol (ToolBar);