The use of the __js map Js API

Source: Internet
Author: User
apply for 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 the user some more detailed information, such as clicking on a point tag, through the information form to show where the point tag in the creation and setting of the information Form

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);


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.