javascript:在网页地图上画圆形范围圈、位置图标标点

我使用的是高德地图，因为是在网页上使用，所以我选择的是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年毕业，目前在北京一家公司做运维开发。

javascript:在网页地图上画圆形范围圈、位置图标标点相关推荐

android百度地图画圆,使用百度地图Api，在地图上画圆形区域
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;width:78 ...
如何在百度地图上画镂空圆 Android
百度API提供了在地图上画圆形的类,但画出圆只能是实心圆,也就是不能实现让圆内没有颜色而圆外有颜色的镂空圆.那么我们应该实现镂空圆呢? 首先我发现API还提供一个画多边形的类.而一个镂空圆分解成两个多 ...
ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...
qgis在地图上画导航线_在Laravel中的航线
qgis在地图上画导航线 For further process we need to know something about it, 为了进一步处理,我们需要了解一些有关它的信息, The rou ...
生成世界地图并在地图上画圆圈
figure worldmap('world')% 添加海洋和陆地的颜色 oceanColor = [0.5 0.7 0.9]; % 海洋颜色 landColor = [0.5 0.5 0.5]; % ...
Arcgis for Android在地图上画多边形并进行边长、周长和面积的测量
Arcgis for Android的地图操作里,放大缩小地图.图层切换.定位.测距测面等都是它的一些基本操作,封装后一般调用就是了,很简单.不过最近有了个需求,在地图上画一个多边形时候同时进行多边形 ...
python比例图_python在地图上画比例的实例详解
现在用python画图已经难不倒一直跟小编学习的小伙伴们了,甚至有的小伙伴画图比小编还要厉害.为此小编还偷偷下了一番功夫,画图这种事情,细节上的完善肯定能让图片更加好看.所以小编知道大家会画地图,但是 ...
Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号订阅 <变形金刚2>上映4日国内票房过亿,基本上我只 ...
用 javascript 获取当页面上鼠标（光标）位置
用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等.当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理 ...

javascript:在网页地图上画圆形范围圈、位置图标标点

交个朋友，认识优秀的你我

javascript:在网页地图上画圆形范围圈、位置图标标点相关推荐

最新文章

热门文章