<!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%;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.input-card .btn {
width: 9rem;
}
.input-card .btn:first-child {
margin-right: 1.3rem;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<h4>添加覆盖物</h4>
<div class="input-item">
<input id="addOneOverlay" type="button" class="btn" value="添加一个覆盖物"/>
<input id="addSeveralOverlay" type="button" class="btn" value="添加多个覆盖物"/>
</div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.43, 39.92],
resizeEnable: true
});
// 创建点覆盖物
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.92),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30)
});
var polylinePath = [
new AMap.LngLat(116.41, 39.93),
new AMap.LngLat(116.43, 39.91)
];
// 创建线覆盖物
var polyline = new AMap.Polyline({
path: polylinePath
});
var polygonPath = [
new AMap.LngLat(116.46, 39.93),
new AMap.LngLat(116.44, 39.91),
new AMap.LngLat(116.49, 39.91)
];
// 创建面覆盖物
var polygon = new AMap.Polygon({
path: polygonPath
});
var addOneOverlayButton = document.getElementById('addOneOverlay');
var addSeveralOverlayButton = document.getElementById('addSeveralOverlay');
// 绑定添加一个覆盖物事件
addOneOverlayButton.onclick = function () {
map.add(marker);
};
// 绑定添加多个覆盖物事件
addSeveralOverlayButton.onclick = function () {
map.add([polyline, polygon]);
};
</script>
</body>
</html>
订阅评论
0 评论