高德地图 JS API （地图/地图属性）
太叔天宇
写在前面：
开发工具使用HBuilder，只需要将key替换成您申请的key值，代码即可直接使用。
1，中、英文地图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>英文、中英文地图</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:13rem">
<h4>底图语言切换</h4>
<div id="lang">
<div class="input-item"><input id="en" name="language" type="radio"><span class="input-text">英文底图</span></div>
<div class="input-item"><input id="zh_en" name="language" type="radio"><span class="input-text">中英文对照</span></div>
<div class="input-item"><input id="zh_cn" name="language" type="radio" checked="checked"><span class="input-text">中文底图</span></div>
</div>
</div>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true,
center: [121.498586, 31.239637],
zoom: 20,
lang: "zh_cn" //可选值：en，zh_en, zh_cn
});
//绑定radio点击事件
var radios = document.querySelectorAll("#lang input");
radios.forEach(function(radio) {
radio.onclick = setLang;
});
function setLang() {
map.setLang(this.id);
}
</script>
</body>
</html>2，获取地图中心点/级别
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
#map-zoom, #map-center {
color: #0288d1;
}
</style>
<title>地图级别与中心点</title>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>获取地图级别与中心点坐标</h4>
<p>当前级别：<span id="map-zoom">11</span></p>
<p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始地图级别
center: [121.498586, 31.239637], //初始地图中心点
});
//显示地图层级与中心点信息
function logMapinfo(){
var zoom = map.getZoom(); //获取当前地图级别
var center = map.getCenter(); //获取当前地图中心位置
document.querySelector("#map-zoom").innerText = zoom;
document.querySelector("#map-center").innerText = center.toString();
};
//绑定地图移动与缩放事件
map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);
</script>
</body>
</html>3，设置地图中心点/级别
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>设置地图级别与中心点</title>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:24rem">
<h4>设置地图中心点</h4>
<div class="input-item">
<button id="random-zoom-btn" class="btn">随机地图层级 setZoom</button>
</div>
<div class="input-item">
<button id="random-center-btn" class="btn">随机地图中心点 setCenter</button>
</div>
<div class="input-item">
<button id="random-zoomcenter-btn" class="btn">随机地图层级与中心点 setZoomAndCenter</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 12, //初始地图级别
center: [121.498586, 31.239637], //初始地图中心点
showIndoorMap: false //关闭室内地图
});
//绑定按钮事件，改变地图层级
document.querySelector("#random-zoom-btn").onclick = function() {
var zoom = Math.floor(Math.random() * 7) + 11; //zoom范围[11,18]
map.setZoom(zoom); //设置地图层级
log.info(`当前层级已设为${zoom}级`);
}
//绑定按钮事件，改变地图中心点
document.querySelector("#random-center-btn").onclick = function() {
var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6; //经度范围[121.138398, 121.728226]
var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6; //纬度范围[30.972688, 31.487611]
map.setCenter([lng, lat]); //设置地图中心点
log.info(`当前中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);
}
//绑定按钮事件，改变地图层级与中心点
document.querySelector("#random-zoomcenter-btn").onclick = function() {
var zoom = Math.floor(Math.random() * 7) + 11;
var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6;
var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6;
map.setZoomAndCenter(zoom, [lng, lat]); //同时设置地图层级与中心点
log.info(`当前层级已设为${zoom}级，中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);
}
</script>
</body>
</html>4，获取当前行政区域
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>获取地图当前行政区</title>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>当前所在行政区信息</h4>
<p><span id="map-city"></span></p>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始地图级别
});
//获取并展示当前城市信息
function logMapinfo(){
map.getCity( function(info){
var node = new PrettyJSON.view.Node({
el: document.querySelector("#map-city"),
data: info
});
});
}
logMapinfo();
//绑定地图移动事件
map.on('moveend', logMapinfo);
</script>
</body>
</html>5，设置当前行政区域
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>设置地图当前行政区</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:24rem;">
<h4>设置地图当前行政区</h4>
<div class="input-item">
<input id='city-name' placeholder="北京市" type="text" style="margin-right:1rem;"><button class="btn" id="query">去指定城市</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.405285,39.904989]
});
//根据cityname、adcode、citycode设置地图位置
function gotoCity() {
var val = document.querySelector('#city-name').value; //可以是cityname、adcode、citycode
if (!val) {
val = "北京市";
}
map.setCity(val);
log.info(`已跳转至${val}`);
}
//绑定查询点击、回车事件
document.querySelector('#query').onclick = gotoCity;
document.querySelector('#city-name').onkeydown = function(e) {
if (e.keyCode === 13) {
gotoCity();
return false;
}
return true;
};
</script>
</body>
</html>6，设置/获取地图显示范围
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图显示范围</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
.lnglat {
color: #0288d1;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>当前地图显示范围（Bounds）</h4>
<p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
<p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
</div>
<div class="input-card" style="width:16rem;">
<h4>控制地图显示范围</h4>
<div class="input-item">
<button class="btn" id="reset-bounds">指定地图显示范围</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 10,
center: [116.405285, 39.904989],
showIndoorMap: false
});
//显示当前地图边界范围坐标
function logMapBounds() {
var bounds = map.getBounds();
document.querySelector("#ne").innerText = bounds.northeast.toString();
document.querySelector("#sw").innerText = bounds.southwest.toString();
}
logMapBounds();
//绑定地图移动与缩放事件
map.on('moveend', logMapBounds);
map.on('zoomend', logMapBounds);
//绑定按钮事件
document.querySelector("#reset-bounds").onclick = function() {
//通过 new AMap.Bounds(southWest:LngLat, northEast:LngLat) 或者 map.getBounds() 获得地图Bounds信息
var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
map.setBounds(mybounds);
}
</script>
</body>
</html>7，限制地图显示范围
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图显示范围</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
.lnglat {
color: #0288d1;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>地图限制区域信息</h4>
<p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
<p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
</div>
<div class="input-card" style="width:14rem;">
<h4>限制地图显示范围</h4>
<div class="input-item">
<button class="btn" id="lock-bounds">限定地图显示范围</button>
</div>
<div class="input-item">
<button class="btn" id="unlock-bounds">取消地图显示限制</button>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 11,
showIndoorMap: false
});
function logMapInfo() {
var limitBounds = map.getLimitBounds();
if (limitBounds) {
document.querySelector("#ne").innerText = limitBounds.northeast.toString();
document.querySelector("#sw").innerText = limitBounds.southwest.toString();
} else {
document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
}
}
//限制地图显示范围
function lockMapBounds() {
var bounds = map.getBounds();
map.setLimitBounds(bounds);
logMapInfo();
}
//取消地图显示限制
function unlockMapBounds() {
map.clearLimitBounds();
logMapInfo();
}
//启用地图范围限定
lockMapBounds();
logMapInfo();
//绑定按钮事件
document.querySelector("#lock-bounds").onclick = lockMapBounds;
document.querySelector("#unlock-bounds").onclick = unlockMapBounds;
</script>
</body>
</html>8，地图的平移
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图平移</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto">
<div class="input-item">
<input id="piexBtn" type="button" class="btn" value="平移像素值：(50,100)"/>
</div>
<div class="input-item">
<input id="pantoBtn" type="button" class="btn" value="地图中心点平移至：(116.405467,39.907761)"/>
</div>
</div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 13,
center: [116.397428, 39.90923]
});
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]);
});
</script>
</body>
</html>9，交互控制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>交互控制</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>当前地图状态（Status）</h4>
<p><span id="map-status"></span></p>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script>
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
}
//获取并展示地图状态信息
function logMapOptions() {
var node = new PrettyJSON.view.Node({
el: document.querySelector("#map-status"),
data: mapOpts
});
}
logMapOptions();
//创建地图
var map = new AMap.Map('container', mapOpts);
//通过map.setStatus方法动态设置地图状态
/**
map.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
*/
</script>
</body>
</html>10，获取鼠标点击经纬度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>鼠标拾取地图坐标</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0px;
}
.map{
height: 100%;
width: 100%;
float: left;
}
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
<h4>左击获取经纬度：</h4>
<div class="input-item">
<input type="text" readonly="true" id="lnglat">
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});
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);
}
}
</script>
</body>
</html>11，地图的热点
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图热点</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
}
.map{
height: 100%;
width: 100%;
float: left;
}
.info-title{
font-weight: bolder;
color: #fff;
font-size: 14px;
line-height: 26px;
padding: 0 0 0 6px;
background: #25A5F7
}
.info-content{
padding: 4px;
color: #666666;
line-height: 23px;
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
}
.info-content img{
float: left;
margin: 3px;
}
.amap-info-combo .keyword-input {
height: auto;
}
</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container" class="map"></div>
<div id="tip">鼠标悬停热点试试</div>
<script>
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>");
}
</script>
</body>
</html>12，设置鼠标样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>设置鼠标样式</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" href="https://at.alicdn.com/t/font_873139_0v65kqy674.css" >
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0px;
}
.map{
height: 100%;
width: 100%;
float: left;
}
.input-card {
width: 70px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div id="container" class="map"></div>
<ul id="cursorList" class="input-card">
<li>
<input name="cursor" value="default" type="radio" onclick="switchCursor(this)" checked>
<span class="iconfont icon-Cursor"></span>
</li>
<li>
<input name="cursor" value="pointer" type="radio" onclick="switchCursor(this)">
<span class="iconfont icon--Hand-Cursor"></span>
</li>
<li>
<input name="cursor" value="move" type="radio" onclick="switchCursor(this)">
<span class="iconfont icon-cursor-move"></span>
</li>
<li>
<input name="cursor" value="crosshair" type="radio" onclick="switchCursor(this)">
<span class="iconfont icon-cross"></span>
</li>
</div>
<script type="text/javascript">
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true
});
//使用CSS默认样式定义地图上的鼠标样式
map.setDefaultCursor("pointer");
//自定义鼠标样式图标
function switchCursor(target) {
var value = target.value;
map.setDefaultCursor(value);
}
</script>
</body>
</html>
类似资料：