prelude:
First of all, you need to register a key of Gaode map
show map
<!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>
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
let map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [114.124739,22.6077] //初始化地图中心点
});
map = new AMap.Map('container', {
mapStyle: 'amap://styles/normal', //设置地图的显示样式
});
</script>
</body>
</html>Common AutoNavi map styles
amap://styles/normal: The default map style, including roads, buildings, waters and other elements.amap://styles/darkblue: Black and blue style map with darker tone, suitable for night use or special scenes.amap://styles/lightblue: Light blue style map with lighter tone, suitable for daytime use or special scenes.amap://styles/grey: A gray-style map with a darker tone, suitable for specific visual effect requirements.amap://styles/fresh: Fresh style map with bright and clear colors, suitable for displaying leisure and travel scenes.amap://styles/blue: Blue-style map with a bluish tone, suitable for displaying scenes such as waters and oceans.amap://styles/whitesmoke: The map in white smoke style, with a layer of white transparency as a whole.
Add map control
Toolbar, scale bar, positioning, eagle eye, basic layer switching
Renderings:
Code display:
<!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>
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script
src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
let map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [114.124739, 22.6077] //初始化地图中心点
});
map = new AMap.Map('container', {
mapStyle: 'amap://styles/normal', //设置地图的显示样式
});
let toolbar;
let Scale;
let Geolocation;
AMap.plugin([
'AMap.ToolBar',
'AMap.Scale',
'AMap.HawkEye',
'AMap.MapType',
'AMap.Geolocation',
], function () {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({ opened: false }));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
map.addControl(new AMap.Geolocation());
});
</script>
</body>
</html>Click any point on the map to add a marker point
Get the latitude and longitude of the mouse click
Renderings:
Code display:
<!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>
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#container {
width: 100%;
height: 100%;
}
.custom-content-marker {
position: relative;
width: 25px;
height: 34px;
}
.custom-content-marker img {
width: 100%;
height: 100%;
}
.custom-content-marker .close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}
.custom-content-marker .close-btn:hover {
background: #666;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxxxxxxxxx0"></script>
<script type="text/javascript">
let map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [114.124739, 22.6077] //初始化地图中心点
});
map = new AMap.Map('container', {
mapStyle: 'amap://styles/normal', //设置地图的显示样式
});
map.on('click', function (e) {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
// 点标记显示内容，HTML要素字符串
const markerContent = '' +
'<div class="custom-content-marker">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
' <div class="close-btn" onclick="clearMarker()">X</div>' +
'</div>';
const position = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()); // Marker经纬度
const marker = new AMap.Marker({
position: position,
content: markerContent, // 将 html 传给 content
offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
});
map.add(marker);
});
</script>
</body>
</html>Mouse Tool - Draw Overlay
Renderings:
Code display:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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" type="text/css">
<style>
html,
body,
#container {
height: 100%
}
.input-item {
height: 2.2rem;
}
.btn {
width: 6rem;
margin: 0 1rem 0 2rem;
}
.input-text {
width: 4rem;
margin-right: 1rem;
}
</style>
<title>鼠标工具绘制</title>
</head>
<body>
<div id='container'></div>
<div class='info'>操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div>
<div class="input-card" style='width: 24rem;'>
<div class="input-item">
<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
</div>
<div class="input-item">
<input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
<input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
</div>
<div class="input-item">
<input id="clear" type="button" class="btn" value="清除" />
<input id="close" type="button" class="btn" value="关闭绘图" />
</div>
</div>
<script
src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxx&plugin=AMap.MouseTool"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 14
});
// AMap.MouseTool(map) 建立了一个与指定地图实例关联的鼠标工具，以便在地图上进行交互操作。通过这个工具，可以实现绘制覆盖物、编辑覆盖物、删除覆盖物等功能。
var mouseTool = new AMap.MouseTool(map);
var overlays = [];
// 用户完成绘制操作时，会触发这个事件
mouseTool.on('draw', function (e) {
overlays.push(e.obj);
})
function draw(type) {
switch (type) {
case 'marker': {
mouseTool.marker({
//同Marker的Option设置
});
break;
}
case 'polyline': {
mouseTool.polyline({
strokeColor: '#80d8ff'
//同Polyline的Option设置
});
break;
}
case 'polygon': {
mouseTool.polygon({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'rectangle': {
mouseTool.rectangle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'circle': {
mouseTool.circle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Circle的Option设置
});
break;
}
}
}
var radios = document.getElementsByName('func');
// 选择框添加点击事件
for (var i = 0; i < radios.length; i += 1) {
radios[i].onchange = function (e) {
draw(e.target.value)
}
}
// 页面初始化时默认选择画点
draw('marker')
document.getElementById('clear').onclick = function () {
// 使用 map.remove() 方法前，请确保 overlays 数组中包含有效的覆盖物对象，并且这些对象确实存在于地图上。
//清除覆盖物
map.remove(overlays)
overlays = [];
}
document.getElementById('close').onclick = function () {
mouseTool.close(true)//关闭，并清除覆盖物
for (var i = 0; i < radios.length; i += 1) {
radios[i].checked = false;
}
}
</script>
</body>
</html>Jump to the query location after entering the prompt
Renderings:
code:
<!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://cache.amap.com/lbs/static/main1119.css" />
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'xxxxxxxxxxxxx',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxx"></script>
<script type="text/javascript">
//地图加载
var map = new AMap.Map("container", {
// resizeEnable: true表示地图在窗口大小变化时自适应调整大小
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "tipinput"
};
// 加载AMap.PlaceSearch和AMap.AutoComplete插件。这两个插件提供了地点搜索和地址输入提示的功能
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
// 用于地址输入提示功能
var auto = new AMap.AutoComplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
auto.on("select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
});
</script>
</body>
</html>hint:
The applied key must be used together with the security key jscode or the function will fail
weather forecast
Renderings:
code:
<!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 type="text/css">
html,
body,
#container {
height: 100%;
}
.weather {
width: 5rem;
display: inline-block;
padding-left: 0.5rem;
}
.sharp {
height: 1rem;
width: 1rem;
background-color: white;
transform: rotateZ(45deg);
box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);
position: inherit;
margin-left: 10.5rem;
margin-top: -6px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>预报天气</h4>
<hr>
<p id='forecast'></p>
</div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'xxxxxxxxxxx',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
center: [114.125755, 22.605077],
zoom: 12
});
AMap.plugin('AMap.Weather', function () {
var weather = new AMap.Weather();
//查询实时天气信息
weather.getLive('龙岗区', function (err, data) {
if (!err) {
var str = [];
str.push('<h4 >实时天气' + '</h4><hr>');
str.push('<p>城市/区：' + data.city + '</p>');
str.push('<p>天气：' + data.weather + '</p>');
str.push('<p>温度：' + data.temperature + '℃</p>');
str.push('<p>风向：' + data.windDirection + '</p>');
str.push('<p>风力：' + data.windPower + ' 级</p>');
str.push('<p>空气湿度：' + data.humidity + '</p>');
str.push('<p>发布时间：' + data.reportTime + '</p>');
// 标记点
var marker = new AMap.Marker({ map: map, position: map.getCenter() });
// 在标记点上显示天气信息
var infoWin = new AMap.InfoWindow({
content: '<div class="info" style="position:inherit;margin-bottom:0;">' + str.join('') + '</div><div class="sharp"></div>',
isCustom: true,
offset: new AMap.Pixel(0, -37)
});
// 当鼠标悬停在标记点上时触发 打开
marker.on('mouseover', function () {
infoWin.open(map, marker.getPosition());
});
// 鼠标移出 关闭
marker.on('mouseout', function () {
infoWin.close();
});
}
});
//获取龙岗区未来4天天气预报数据
weather.getForecast('龙岗区', function (err, data) {
if (err) { return; }
var str = [];
for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
dayWeather = data.forecasts[i];
str.push(dayWeather.date + ' <span class="weather">' + dayWeather.dayWeather + '</span> ' + dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
}
document.getElementById('forecast').innerHTML = str.join('<br>');
});
});
</script>
</body>
</html>