高德地图 JS API 学习摘要1

1、安装

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

2、使用

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

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

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

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

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

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

3、API

创建地图

地图加载完成

地图加载完成事件 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 主体资源下发，需要引入之后才能使用这些插件的功能。

异步加载插件

异步加载指的是在 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);
});

异步加载多个插件

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

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

同步加载插件

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

插件列表

类名	功能说明
AMap.ElasticMarker	灵活点标记，可以随着地图级别改变样式和大小的 Marker
AMap.ToolBar	工具条，控制地图的缩放、平移等
AMap.Scale	比例尺，显示当前地图中心的比例尺
AMap.OverView	鹰眼，显示缩略图
AMap.MapType	图层切换，用于几个常用图层切换显示
AMap.Geolocation	定位，提供了获取用户当前准确位置、所在城市的方法
AMap.AdvancedInfoWindow	高级信息窗体，整合了周边搜索、路线规划功能
AMap.Autocomplete	输入提示，提供了根据关键字提示信息的功能
AMap.PlaceSearch	地点搜索服务，提供了关键字搜索、周边搜索、范围内搜索等功能
AMap.PlaceSearchLayer	搜索结果图层类，将搜索结果作为图层展示
AMap.DistrictSearch	行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
AMap.LineSearch	公交路线服务，提供公交路线相关信息查询服务
AMap.StationSearch	公交站点查询服务，提供途经公交线路、站点位置等信息
AMap.Driving	驾车路线规划服务，提供按照起、终点进行驾车路线的功能
AMap.TruckDriving	货车路线规划
AMap.Transfer	公交路线规划服务，提供按照起、终点进行公交路线的功能
AMap.Walking	步行路线规划服务，提供按照起、终点进行步行路线的功能
AMap.Riding	骑行路线规划服务，提供按照起、终点进行骑行路线的功能
AMap.DragRoute	拖拽导航插件，可拖拽起终点、途经点重新进行路线规划
AMap.ArrivalRange	公交到达圈，根据起点坐标，时长计算公交出行是否可达及可达范围
AMap.Geocoder	地理编码与逆地理编码服务，提供地址与坐标间的相互转换
AMap.CitySearch	城市获取服务，获取用户所在城市信息或根据给定IP参数查询城市信息
AMap.IndoorMap	室内地图，用于在地图中显示室内地图
AMap.MouseTool	鼠标工具插件
AMap.CircleEditor	圆编辑插件
AMap.PolyEditor	折线、多边形编辑插件
AMap.MarkerClusterer	点聚合插件
AMap.RangingTool	测距插件，可以用距离或面积测量
AMap.CloudDataLayer	云图图层，用于展示云图信息
AMap.CloudDataSearch	云图搜索服务，根据关键字搜索云图点信息
AMap.Weather	天气预报插件，用于获取未来的天气信息
AMap.RoadInfoSearch	道路信息查询，已停止数据更新，反馈信息仅供参考
AMap.Hotspot	热点插件，地图热点已默认开启，不用手动添加，由Map的 isHotspot 属性替代
AMap.Heatmap	热力图插件

中英文地图切换

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

获取地图当前行政区

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插件

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(''+poi.name+''+"地址：" + poi.address);
    s.push("电话：" + poi.tel);
    s.push("类型：" + poi.type);
    s.push('');
    return s.join("
"); // 返回一个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);
}