准备工作

  • 注册开发者
  • 创建应用
  • 拿到百度地图ak

前端实现方案

引入百度地图API和工具类库

　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=您的密钥"></script>

   <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

显示地图的HTML

<body>

<div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>

<div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">

    <table style="width:100%;">

        <tr>

            <td colspan="2">判断是否在区域内:</td>

        </tr>

        <tr>

            <td><input type="button" value="点击打开范围" onclick="polygon()" /></td>

        </tr>

        <tr>

            <td>经度<input type="text" value="" id="lng"></td>

        </tr>

        <tr>

            <td>纬度<input type="text" value="" id="lat"></td>

        </tr>

        <tr>

            <td>结果：</td>

        </tr>

        <tr>

            <td><p id="result" style="color:red"></p></td>

        </tr>

        </table>

</div>

</body>

生成多边形以及判断点击的点是否在范围内的JS

<script type="text/javascript">

    var map = new BMap.Map("container");

    var pt = new BMap.Point(116.404, 39.915);

    var mkr = new BMap.Marker(pt);

    var ply;  //多边形

    map.centerAndZoom(pt, 16);

    map.enableScrollWheelZoom(); //开启滚动缩放

    map.enableContinuousZoom(); //开启缩放平滑

    //初始化范围多边形

    polygon1();

    //生成多边形

    function polygon() {

        var pts = [];

        var pt1 = new BMap.Point(116.475, 40.017);

        var pt2 = new BMap.Point(116.355, 40.025);

        var pt3 = new BMap.Point(116.220, 39.994);

        var pt4 = new BMap.Point(116.208, 39.888);

        var pt5 = new BMap.Point(116.279, 39.780);

        var pt6 = new BMap.Point(116.398, 39.759);

        var pt7 = new BMap.Point(116.558, 39.846);

        var pt8 = new BMap.Point(116.549, 39.939);

        pts.push(pt1);

        pts.push(pt2);

        pts.push(pt3);

        pts.push(pt4);

        pts.push(pt5);

        pts.push(pt6);

        pts.push(pt7);

        pts.push(pt8);

        ply = new BMap.Polygon(pts);

        //演示：将面添加到地图上

        map.clearOverlays();

        map.addOverlay(ply);

    }

    map.addEventListener("click", function (e) {

        mkr.setPosition(e.point);

        map.addOverlay(mkr);

        //将点击的点的坐标显示在页面上

        document.getElementById("lng").value = e.point.lng;

        document.getElementById("lat").value = e.point.lat;

        InOrOutPolygon(e.point.lng, e.point.lat);

    });

    function InOrOutPolygon(lng, lat){

        var pt = new BMap.Point(lng, lat);

        var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);

        if (result == true) {

            document.getElementById("result").innerHTML = "在区域范围内";

        } else {

            document.getElementById("result").innerHTML = "在区域范围外";

        }

    }

</script>

web开发如何使用百度地图API（一）判断点是否在范围内的更多相关文章

  1. web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  2. web开发如何使用高德地图API（三）点击热点打开信息窗体

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  3. web开发如何使用高德地图API（二）结合输入提示和POI搜索插件

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  4. web开发如何使用高德地图API（一）浏览器定位

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  5. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  6. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  7. 深入浅出百度地图API开发系列（2）：创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  8. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  9. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

随机推荐

  1. WPF-使用面板控制内容布局，比较Canvas，WrapPanel，StackPanel，Grid，ScrollViewer

    WPF-使用面板控制内容布局,比较Canvas,WrapPanel,StackPanel,Grid,ScrollViewer 分类: WPF2012-04-24 09:59 660人阅读 评论(0)  ...

  2. FormatString格式大众人全

    FormatString格式大众人全 Posted on 2010-08-12 16:14 moss_tan_jun 阅读(457) 评论(0) 编辑 收藏 格式化日期和数字的字符串经常要用到这个, ...

  3. [HNOI2011]XOR与路径

    https://zybuluo.com/mdeditor#1094266 标签(空格分隔): 高斯消元 期望 题面 从 1 号节点开始,以相等的概率,随机选择与当前节点相关联的某条边,并沿这条边走到下 ...

  4. MVVMLight消息通知实现机制详解（二）

    接上文 MVVMLight消息通知实现机制详解(一) 该工具的内部主要逻辑是以字典模式进行储存持有订阅对象设置的传入参数Type类型.Key值.Action.Target(订阅对象本身) 在发生订阅事 ...

  5. E20170804-mk

    epic n. 史诗; 叙事诗; 史诗般的作品; estimate vt. 估计,估算; 评价,评论; 估量,估价; Sprint  vi. 冲刺,全速短跑; n. 全速短跑; 速度或活动的突然爆发; ...

  6. Network(Tarjan+LCA)

    http://poj.org/problem?id=3417 元宵节+情人节晚上刷的题,纪念一下.. 题意:给出n个点,m条边,然后Q个询问,每次询问输入一条边,输出加入此边后桥的个数.. #incl ...

  7. php排序函数测试

    1.sort,asort,arsort函数 十万个数的数组排序,用了0.17秒 $starttime=explode(' ',microtime());;for ($i=0; $i <10000 ...

  8. Django day29 视图，路由控制，响应器

    一:视图 1.视图的几种方式: (1) 第一种 from rest_framework.mixins import ListModelMixin, CreateModelMixin class Pub ...

  9. Spring Boot (25) RabbitMQ消息队列

    MQ全程(Message Queue)又名消息队列,是一种异步通讯的中间件.可以理解为邮局,发送者将消息投递到邮局,然后邮局帮我们发送给具体的接收者,具体发送过程和时间与我们无关,常见的MQ又kafk ...

  10. Unity学习-软件的基本操作（二）

    基本操作 1:Scene中 以小手显示,平移画布,与鼠标中键一样 2:平移 游戏对象,组件的 Position属性 也可设置 3:旋转 游戏对象,组件的 Rotation属性 也可设置 4:缩放 游戏 ...