<!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="http://cache.amap.com/lbs/static/main1119.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=/*APIKEY*/&plugin=AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* CARD */
.card {
display: flex;
flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex-direction: column;
width: 10rem;
min-width: 0;
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.5rem 0.5rem 0.5rem 1rem;
background-color: #fff;
background-clip: border-box;
border-width: 0;
border-radius: 1rem;
font-size: 12px;
font-family: Arial;
word-wrap: break-word;
color: #0288d1;
display: block;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="card">
<span id="map-zoom">11</span> :
<span id="map-center">121.498586,31.239637</span>
</div>
</body>
</html>
<script>
var showRect = /*SHOWRECT*/;
var nameFormat = "/*NAMEFORMAT*/";
var map = new AMap.Map('container', {
resizeEnable: true,
layers: [new AMap.TileLayer()],
center: [/*CENTER*/],
zoom: /*ZOOMDISP*/,
expandZoomRange: true,
zooms:[/*ZOOMMIN*/,/*ZOOMMAX*/]
});
//map.setLayers([new AMap.TileLayer.Satellite()]);
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.OverView());
map.addControl(new AMap.MapType());
// 添加叠加图层
var tilerLayer = new AMap.TileLayer({
zIndex: 10,
getTileUrl: function (x, y, z) {
var name = nameFormat
.replace("{x}", x)
.replace("{y}", y)
.replace("{z}", z)
;
return 'tiles/' + z + '/' + name + '.png';
}
});
tilerLayer.setMap(map);
// 添加矩形
if (showRect) {
var path1 = [
new AMap.LngLat(/*POINT1*/),
new AMap.LngLat(/*POINT2*/),
new AMap.LngLat(/*POINT3*/),
new AMap.LngLat(/*POINT4*/),
new AMap.LngLat(/*POINT1*/)
];
var polyline = new AMap.Polyline({
path: path1,
strokeColor: 'blue',
strokeWeight: 3
});
map.add([polyline]);
}
// 显示地图层级与中心点信息
map.on('mapmove', showMapInfo);
map.on('zoomend', showMapInfo);
function showMapInfo() {
var zoom = map.getZoom(); //获取当前地图级别
var center = map.getCenter(); //获取当前地图中心位置
document.querySelector("#map-zoom").innerText = zoom;
document.querySelector("#map-center").innerText = center.lng.toString() + ', ' + center.lat.toString();
}
showMapInfo();
</script>
没有合适的资源?快使用搜索试试~ 我知道了~
百度、高德、腾讯、天地图、谷歌、必应等自定义地图/图片叠加层/瓦片图/金字塔图地图切图高清切片生成工具 MapCutter(旧名MapTiler) ,定位便捷,支持超大地图,支持leaflet、maptalks、openlayers、cesium、及自定义模版输出。最新版本修正了百度地图的偏差、可调整地图图层的不透明度,、完善webgl输出、支持openlayers、cesium网页输出、支持多点调整区域、支持25级切图、支持根据图片坐标自动定位、修正cesium不显示的问题、支持切片图片质量及图片类型、支持MapBox,更多功能请看 https://blog.csdn.net/surfsky/article/details/106951716
资源推荐
资源详情
资源评论



















收起资源包目录






























































































共 89 条
- 1
资源评论

- vitpan2023-03-28好软件,切图精准 #完美解决问题
土豆湿
- 粉丝: 28
- 资源: 42

上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制
