高德/百度地图画圆标记

在地图上绘制圆形搜索范围,形象展示查询效果
第一种方法:简单在线查询
  • 随便打开一家公司的地图;
  • 故宫为例,搜索找到目的地,右击或者在左侧菜单里找到搜周边
  • 在搜索框随便搜个啥,这里就搜个狗吧,输入后点击搜素;
  • 搜素结果就是一个圆形,拖拽右侧的点,改变搜素范围;
  • 如果是汇报演示查询效果,在这个地方截图就足够使用了。如果需要更灵活功能见方法二
地图-搜周边
地图-搜周边-随便搜个啥
地图-搜周边-搜素范围
第二种方法:自己码个简单代码绘图
  • 地图画圆,首先需要个原点,地图坐标经纬度查询方法见高德/百度地图坐标/经纬度查询
  • 绘图代码见如下代码块
  • 以故宫周围1千米范围为例,查询结果如最后一张图所示;
  • 代码参数可调,同理就可以完成画圆画方块画任意图形,还可以实现地图多图形绘制等,更多功能自己动脑筋吧hhhh~
<!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"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    var circle = new AMap.Circle({
        center: new AMap.LngLat("116.39697075", "39.90901202",),// 圆心位置
        radius: 1000, //半径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.7, //线透明度
        strokeWeight: 3,    //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.5//填充透明度
    });

    circle.setMap(map);//显示圆圈
    map.setFitView();//根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别
</script>
</body>
</html>
故宫周围1千米范围

https://www.cnblogs.com/xiaomg/articles/10255661.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容