口扣技术交流 q u n : 894441210
合作vx：xuexiv5876
高德开发者账号申请
基本用法
包括：
- 加载地图
- 显示图层
- 绘制图标
- 绘制矢量图
- 编辑矢量图
- 绘制窗口
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#container {position: relative;}
#tools {position: absolute;right:10px;top:10px;}
.amap-logo {display: none!important;}
.amap-copyright {display: none!important;}
.marker {
position: absolute;
top: 0px;
right: 0px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8653883477c1e38d190463340771816&plugin=AMap.PolyEditor"></script>
<title>地图展示</title>
</head>
<body>
<div id="container"></div>
<div id="tools">
<div>
<button id="show-traf">显示交通</button>
<button id="hide-traf">隐藏交通</button>
</div>
<div>
<button id="show-sate">显示卫星</button>
<button id="hide-sate">隐藏卫星</button>
</div>
<div>
<button id="show-road">显示道路</button>
<button id="hide-road">隐藏道路</button>
</div>
<div>
<button id="show-point">绘制点</button>
<button id="hide-point">隐藏点</button>
</div>
<div>
<button id="show-text">绘制文本</button>
<button id="hide-text">隐藏文本</button>
</div>
<div>
<button id="show-line">绘制线条</button>
<button id="hide-line">隐藏线条</button>
</div>
<div>
<button id="start-edit-line">编辑线条</button>
<button id="close-edit-line">停止编辑</button>
</div>
<div>
<button id="show-circle">绘制圆圈</button>
<button id="hide-circle">隐藏圆圈</button>
</div>
<div>
<button id="show-info">绘制窗口</button>
<button id="hide-info">隐藏窗口</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var sateLayer = new AMap.TileLayer.Satellite(),
roadLayer = new AMap.TileLayer.RoadNet(),
trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
var map = new AMap.Map('container', {
zoom: 11, //级别
zooms: [8, 15],
// layers: [
// sateLayer,
// roadLayer
// ],
center: [116.397428, 39.90923], //中心点坐标
viewMode: '3D' //使用3D视图
});
AMap.plugin(['AMap.ToolBar','AMap.Scale'], function(){//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var scale = new AMap.Scale({
offset: new AMap.Pixel(10, 10)
});
map.addControl(scale);
});
var marker = new AMap.Marker({
icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [116.406315,39.908775],
offset: new AMap.Pixel(-13, -30)
});
var contentMarker = new AMap.Marker({
position: [116.406315,39.908775],
offset: new AMap.Pixel(130, 0)
});
var markerContent = document.createElement("div");
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "test！";
markerContent.appendChild(markerSpan);
var lineArr = [
[116.368904, 39.913423],
[116.382122, 39.901176],
[116.387271, 39.912501],
[116.398258, 39.904600]
];
var polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
});
var infoMarker = new AMap.Marker({
position: [116.481181, 39.989792]
});
var infoWindow = new AMap.InfoWindow({ //创建信息窗体
isCustom: true, //使用自定义窗体
content:'<div style="color:red;">信息窗体</div>', //信息窗体的内容可以是任意html片段
offset: new AMap.Pixel(16, -45)
});
var onMarkerClick = function(e) {
infoWindow.open(map, e.target.getPosition());//打开信息窗体
};
infoMarker.on('click', onMarkerClick); //绑定click事件
var polyEditor = new AMap.PolyEditor(map, polyline)
var circle = new AMap.Circle({
center: new AMap.LngLat(116.39, 39.9), // 圆心位置
radius: 1000, // 圆半径
fillColor: 'red', // 圆形填充颜色
strokeColor: '#fff', // 描边颜色
strokeWeight: 2 // 描边宽度
});
document.getElementById('show-traf').addEventListener('click', function(e){
map.add(trafficLayer); //添加图层到地图
trafficLayer.show();
});
document.getElementById('hide-traf').addEventListener('click', function(e){
trafficLayer.hide();
});
document.getElementById('show-sate').addEventListener('click', function(e){
map.add(sateLayer); //添加图层到地图
sateLayer.show();
});
document.getElementById('hide-sate').addEventListener('click', function(e){
sateLayer.hide();
});
document.getElementById('show-road').addEventListener('click', function(e){
map.add(roadLayer); //添加图层到地图
roadLayer.show();
});
document.getElementById('hide-road').addEventListener('click', function(e){
roadLayer.hide();
});
document.getElementById('show-point').addEventListener('click', function(e){
map.add(marker);
// marker.setMap(map);
});
document.getElementById('hide-point').addEventListener('click', function(e){
map.remove(marker);
});
document.getElementById('show-text').addEventListener('click', function(e){
contentMarker.setMap(map);
contentMarker.setContent(markerContent); //更新点标记内容
contentMarker.setPosition([116.391467, 39.927761]); //更新点标记位置
});
document.getElementById('hide-text').addEventListener('click', function(e){
map.remove(contentMarker);
});
document.getElementById('show-line').addEventListener('click', function(e){
map.add(polyline);
});
document.getElementById('hide-line').addEventListener('click', function(e){
map.remove(polyline);
});
document.getElementById('start-edit-line').addEventListener('click', function(e){
polyEditor.open();
});
document.getElementById('close-edit-line').addEventListener('click', function(e){
polyEditor.close();
});
document.getElementById('show-circle').addEventListener('click', function(e){
map.add(circle);
});
document.getElementById('hide-circle').addEventListener('click', function(e){
map.remove(circle);
});
document.getElementById('show-info').addEventListener('click', function(e){
map.add(infoMarker);
});
document.getElementById('hide-info').addEventListener('click', function(e){
map.remove(infoMarker);
infoWindow.close();
});
</script>
异步加载
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#container {position: relative;}
#tools {position: absolute;left:10px;top:10px;}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e8653883477c1e38d190463340771816"></script>
<title>地图展示</title>
</head>
<body>
<div id="container"></div>
<div id="tools">
<div>
<button id="show-traf">显示交通</button>
<button id="hide-traf">隐藏交通</button>
</div>
<div>
<button id="show-sate">显示卫星</button>
<button id="hide-sate">隐藏卫星</button>
</div>
<div>
<button id="show-road">显示道路</button>
<button id="hide-road">隐藏道路</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.init = init;
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=e8653883477c1e38d190463340771816&callback=init';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
function init() {
var sateLayer = new AMap.TileLayer.Satellite(),
roadLayer = new AMap.TileLayer.RoadNet(),
trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
});
var map = new AMap.Map('container', {
zoom: 11, //级别
zooms: [8, 12],
center: [116.397428, 39.90923], //中心点坐标
viewMode: '3D' //使用3D视图
});
document.getElementById('show-traf').addEventListener('click', function(e){
map.add(trafficLayer); //添加图层到地图
trafficLayer.show();
});
document.getElementById('hide-traf').addEventListener('click', function(e){
trafficLayer.hide();
});
document.getElementById('show-sate').addEventListener('click', function(e){
map.add(sateLayer); //添加图层到地图
sateLayer.show();
});
document.getElementById('hide-sate').addEventListener('click', function(e){
sateLayer.hide();
});
document.getElementById('show-road').addEventListener('click', function(e){
map.add(roadLayer); //添加图层到地图
roadLayer.show();
});
document.getElementById('hide-road').addEventListener('click', function(e){
roadLayer.hide();
});
}
</script>
自定义弹窗
<!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 {
height: 100%;
width: 100%;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
点击地图上的点标记，打开所添加的自定义信息窗体
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript"> //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
var map = new AMap.Map("container", {
resizeEnable: true,
center: [118.784902,32.044077],
zoom: 16
});
addMarker();
//添加marker标记
function addMarker() {
map.clearMap();
var marker = new AMap.Marker({
map: map,
position: [118.784902,32.044077]
});
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
}
//实例化信息窗体
var title = '南京德基广场<span style="font-size:11px;color:#F00;">周末促销</span>',
content = [];
content.push("<img src='https://bkimg.cdn.bcebos.com/pic/962bd40735fae6cdc054821d03b30f2443a70fed?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg' style='width:200px;height:140px'>地址：南京市玄武区中山路18号");
content.push("电话：025-88888888");
content.push("<a href='https://m.dejiplaza.com/vmall/index'>详细信息</a>");
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
</script>
</body>
</html>
网友评论