1、安装

准备-入门-教程-地图 JS API

2、使用

1、在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值"></script> 

2、添加div标签作为地图容器，同时为该div指定id属性；

<div id="container"></div> 

3、为地图容器指定高度、宽度；

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

4、进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

JSAPI 1.3 开始完全支持 HTTPS 协议，如需使用安全协议，替换 JS API 的入口脚本URL中的http为https即可。随着 Chrome、iOS 等相继限制非安全域的定位请求，我们建议您升级网站到HTTPS协议，并使用HTTPS协议加载 JS API。

3、API

创建地图

<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
</script>

地图加载完成

地图加载完成事件 map.on("complete")

map.on("complete", function(){
    log.success("地图加载完成！");  
});

地图的销毁 map.destroy()

document.querySelector("#destroy-btn").onclick = destroyMap;
function destroyMap() {
    map && map.destroy();
    log.info("地图已销毁");
}

异步加载地图

给JSAPI引用地址url加上callback参数，异步调用JSAPI接口

var url = 'https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&callback=onApiLoaded';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

// callback = onApiLoaded
function onApiLoaded(){
    var map = new AMap.Map('container', {
        center: [117.000923, 36.675807],
        zoom: 6
    });
    map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
    });
}

插件的使用

JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。

1. 异步加载插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

var map = new AMap.Map('container',{
    zoom:12,
    center:[116.39,39.9]
});
AMap.plugin('AMap.ToolBar',function(){//异步加载插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
});

2. 异步加载多个插件

AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。

AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
    var driving = new AMap.Driving();//驾车路线规划
    driving.search(/*参数*/)
});

3. 同步加载插件

可以在 JS API 的入口地址中添加plugin参数，将需要使用的一个或者多个插件的名称作为参数即可&plugin=AMap.ToolBar。 需要加载多个插件时，plugin参数中的插件名称之间以逗号分割。&plugin=AMap.ToolBar,AMap.Driving"

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('mapContainer',{
        zoom:12,
        center:[116.39,39.9]
    });
    var toolbar = new AMap.ToolBar();
    map.plugin(toolbar);
    var driving = new AMap.Driving();
    driving.search(/*参数*/)
</script>

4. 插件列表

中英文地图切换

var map = new AMap.Map('container', {
    resizeEnable: true,
    center: [121.498586, 31.239637],
    lang: "en" //可选值：en，zh_en, zh_cn
});

map.setLang('zh_cn'); // 中文
map.setLang('zh_en'); // 中英文对照

获取地图中心点/级别

• map.getCenter()获取地图中心点
• map.getZoom()获取地图缩放级别

设置地图中心点/级别

• setCenter()：改变地图中心点
• setZoom()：改变地图级别
• setZoomAndCenter() ：同时设置地图层级与中心点

map.setZoom(zoom); //设置地图层级 zoom 整数
map.setCenter([lng, lat]); //设置地图中心点 [经度、纬度] 保持6位小数点 toFixed(6)
map.setZoomAndCenter(zoom, [lng, lat]); //同时设置地图层级与中心点

绑定地图移动与缩放事件

map.on('moveend', callback);
map.on('zoomend', callback);

获取地图当前行政区

<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<p><span id="map-city"></span></p>

map.getCity( function(info){
    console.log(info)
    var node = new PrettyJSON.view.Node({
        el: document.querySelector("#map-city"),
        data: info
    });
});    

使用map.getCity()获取地图当前中心所在行政区。回调函数的参数info对象拥有四个属性，province省份、city城市、citycode城市编码、district区。

new PrettyJSON.view.Node()接受一个参数对象渲染视图，el指定渲染的元素，data指定渲染的数据

设置地图当前行政区

用map.setCity(xx)可以通过中文城市名、adcode、citycode等设置地图的中心点。（只支持中国境内）

设置/获取地图显示范围

通过map.getBounds()、map.setBounds()设置/获取地图显示范围

var bounds = map.getBounds();
document.querySelector("#ne").innerText = bounds.northeast.toString();
document.querySelector("#sw").innerText = bounds.southwest.toString();

var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
map.setBounds(mybounds);

限制地图显示范围

var limitBounds = map.getLimitBounds();// 获取地图限制区域信息
limitBounds.northeast.toString();
limitBounds.southwest.toString();
var bounds = map.getBounds(); // 获取显示范围
map.setLimitBounds(bounds); // 限制地图显示范围
map.clearLimitBounds(); // 取消限制
// 取消之后map.getLimitBounds()将获取不到值

地图的平移

除了鼠标、触摸交互，通过map.panBy()和map.panTo()也可以移动地图

 var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 13,
    center: [116.397428, 39.90923]
});

// 使用AMap.event.addDomListener监听DOM事件
AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
    map.panBy(50, 100);// 平移多少 两个都是正值就是往左上平移
});
AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
    map.panTo([116.405467, 39.907761]); // 平移到哪去
});

交互控制

通过map.setStatus()修改地图的可拖拽、可缩放等状态。

var mapOpts = {
    showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
    resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
    dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
    keyboardEnable: false, //地图是否可通过键盘控制，默认为true
    doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
    zoomEnable: false, //地图是否可缩放，默认值为true
    rotateEnable: false // 地图是否可旋转，3D视图默认为true，2D视图默认false
}

var map = new AMap.Map('container', mapOpts);

   //通过map.setStatus方法动态设置地图状态
map.setStatus({
    dragEnable: true,
    keyboardEnable: true,
    doubleClickZoom: true,
    zoomEnable: true,
    rotateEnable: true
});

获取鼠标点击经纬度

给地图绑定click事`件，获取鼠标位置的经纬度坐标。

• e.lnglat.getLng()：获取经度
• e.lnglat.getLat()：获取纬度

map.on('click', function(e) {
    document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});

注册事件

对Map、覆盖物等常用类，我们推荐直接使用这些类的对象的on、off成员方法来实现事件的简单绑定和移除

• map.on ： 注册事件，给Map或者覆盖物对象注册事件
• map.off ：移除事件绑定

使用AMap.event命名空间

• AMap.event.addDomListener ：注册DOM对象事件
• AMap.event.addListener： 注册对象事件
• AMap.event.addListenerOnce： 注册对象事件 但事件只会被触发一次，之后将自动移除
• AMap.event.removeListener： 删除监听事件
• AMap.event.trigger： 触发非DOM事件

MapsEvent 对象规范

• lnglat: 发生事件时光标所在处的经纬度坐标。
• pixel: 发生事件时光标所在处的像素坐标。
• type: 事件类型。
• target: 发生事件的目标对象。

输入自动提示 选择自动定位

// 引入Autocomplete插件
<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Autocomplete"></script>

<input type="text"  id="tipinput">

var auto = new AMap.Autocomplete({
    input: "tipinput"
});

AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
    if (e.poi && e.poi.location) {
        map.setZoom(15);
        map.setCenter(e.poi.location);
    }
}
// 事件对象e拥有poi和type两个属性

select事件的事件对象

地图的热点

通过isHotspot开启地图的热点功能，并以

var map = new AMap.Map('container', {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 13,
    isHotspot: true
});
var placeSearch = new AMap.PlaceSearch();  //构造地点查询类
var infoWindow=new AMap.AdvancedInfoWindow({}); //高级信息窗体，整合了周边搜索、路线规划功能
map.on('hotspotover', function(result) {
    placeSearch.getDetails(result.id, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            placeSearch_CallBack(result);
        }
    });
});
//回调函数
function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
    var poiArr = data.poiList.pois;
    var location = poiArr[0].location;
    infoWindow.setContent(createContent(poiArr[0]));
    infoWindow.open(map,location);
}
function createContent(poi) {  //信息窗体内容
    var s = [];
    s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
    s.push("电话：" + poi.tel);
    s.push("类型：" + poi.type);
    s.push('<div>');
    return s.join("<br>"); // 返回一个html字符串
}

设置鼠标样式

使用Map.setDefaultCursor设置地图默认的鼠标样式，用于自定义地图等场景。

map.setDefaultCursor("pointer");

// "default"  默认箭头
// "pointer"  指针
// "move"  可移动表示
// "crosshair"  十字线
// ...

覆盖物的添加与移除

• new AMap.Marker() ：构造标记
• new AMap.Circle(): 构造矢量圆形
• map.add(mark / circle): 添加标记
• map.remove(mark / circle): 移除标记（与上接受相同的参数才能移除）
• map.setFitView()：有时候地图上可视化元素较多，我们需要地图调整合适的缩放等级和中心点，以保证所有元素都显示其中时，我们可以调用setFitView()方法，以实现该效果。

var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom:11,
    center: [116.397428, 39.90923]
});
    // 构造点标记
var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 标记点图片
    position: [116.405467, 39.907761] // 标记点位置
});
// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
    radius: 1000,  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});
//事件绑定
document.querySelector("#add-marker").onclick = function() {
    map.add(marker);
    map.setFitView();
}
document.querySelector("#remove-marker").onclick = function() {
    map.remove(marker);
    map.setFitView();
}
document.querySelector("#add-circle").onclick = function() {
    map.add(circle);
    map.setFitView();
}
document.querySelector("#remove-circle").onclick = function() {
    map.remove(circle);
    map.setFitView();
}

图层的添加与移除

// 构造官方卫星、路网图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer =  new AMap.TileLayer.RoadNet();

//批量添加图层
map.add([satelliteLayer, roadNetLayer]);

//事件绑定
document.querySelector("#add-satellite-layer").onclick = function() {
    map.add(satelliteLayer);
}

document.querySelector("#remove-satellite-layer").onclick = function() {
    map.remove(satelliteLayer);
}