我使用的是高德地图,因为是在网页上使用,所以我选择的是web端。
打开后,这是web端地图中的教程和实例
涉及到的实例很多,这里我就为大家演示一下圆形范围覆盖和地图标点
<!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">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<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值&plugin=AMap.CircleEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.amap-marker-label{
border: 0;
background-color: transparent;
}
.info{
position: relative;
top: 0;
right: 0;
min-width: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
<p>高德地图</p>
</div>
<script type="text/javascript">
//地图初始显示位置
var map = new AMap.Map("container", {
center: [103.888235,25.48758],
zoom: 14
});
//在地图上绘制圆形
//具体属性请查看文档
var circle = new AMap.Circle({
center: [103.888235,25.48758],
radius: 1000, //半径
borderWeight: 3,
strokeColor: "#007acc",
strokeOpacity: 1,
strokeWeight: 0,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'solid',
strokeDasharray: [0,0,0],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
});
// 将圆形添加到地图上
circle.setMap(map);
//在地图上绘制坐标点
var marker1 = new AMap.Marker({
map:map,
position:[103.888235,25.48758],
icon:'./img/ditu1.png'
});
//设置坐标点的提示位置
marker1.setLabel({
offset: new AMap.Pixel(5, 5), //设置文本标注偏移量
content: "<div class='info'>位置A</div>", //设置文本标注内容
direction: 'right' //设置文本标注方位
});
var marker2 = new AMap.Marker({
map:map,
position:[103.873254,25.484687],
icon:'./img/ditu2.png'
});
marker2.setLabel({
offset: new AMap.Pixel(5, 5), //设置文本标注偏移量
content: "<div class='info'>位置B</div>", //设置文本标注内容
direction: 'right' //设置文本标注方位
});
// 缩放地图到合适的视野级别
map.setFitView([ circle ]);
//计算两点间的距离
var p1 = [103.888235,25.48758];
var p2 = [103.873254,25.48468];
// 返回 p1 到 p2 间的地面距离,单位:米(使用的是高德自带的函数)
var dis = AMap.GeometryUtil.distance(p1, p2);
console.log(dis + '米');
</script>
</body>
</html>
运行结果
交个朋友,认识优秀的你我
我大学读的专业是软件技术,学历专科,云南省曲靖市人,2020年毕业,目前在北京一家公司做运维开发。