准备工作

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

前端实现方案

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

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

显示地图的HTML

  1. <body>
  2. <div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
  3. <div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
  4.     <table style="width:100%;">
  5.         <tr>
  6.             <td colspan="2">判断是否在区域内:</td>
  7.         </tr>
  8.         <tr>
  9.             <td><input type="button" value="点击打开范围" onclick="polygon()" /></td>
  10.         </tr>
  11.         <tr>
  12.             <td>经度<input type="text" value="" id="lng"></td>
  13.         </tr>
  14.         <tr>
  15.             <td>纬度<input type="text" value="" id="lat"></td>
  16.         </tr>
  17.         <tr>
  18.             <td>结果：</td>
  19.         </tr>
  20.         <tr>
  21.             <td><p id="result" style="color:red"></p></td>
  22.         </tr>
  23.         </table>
  24. </div>
  25. </body>

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

  1. <script type="text/javascript">
  2.     var map = new BMap.Map("container");
  3.     var pt = new BMap.Point(116.404, 39.915);
  4.     var mkr = new BMap.Marker(pt);
  5.     var ply;  //多边形
  6.     map.centerAndZoom(pt, 16);
  7.     map.enableScrollWheelZoom(); //开启滚动缩放
  8.     map.enableContinuousZoom(); //开启缩放平滑
  9.  
  10.     //初始化范围多边形
  11.     polygon1();
  12.  
  13.     //生成多边形
  14.     function polygon() {
  15.         var pts = [];
  16.         var pt1 = new BMap.Point(116.475, 40.017);
  17.         var pt2 = new BMap.Point(116.355, 40.025);
  18.         var pt3 = new BMap.Point(116.220, 39.994);
  19.         var pt4 = new BMap.Point(116.208, 39.888);
  20.         var pt5 = new BMap.Point(116.279, 39.780);
  21.         var pt6 = new BMap.Point(116.398, 39.759);
  22.         var pt7 = new BMap.Point(116.558, 39.846);
  23.         var pt8 = new BMap.Point(116.549, 39.939);
  24.         pts.push(pt1);
  25.         pts.push(pt2);
  26.         pts.push(pt3);
  27.         pts.push(pt4);
  28.         pts.push(pt5);
  29.         pts.push(pt6);
  30.         pts.push(pt7);
  31.         pts.push(pt8);
  32.         ply = new BMap.Polygon(pts);
  33.  
  34.         //演示：将面添加到地图上
  35.         map.clearOverlays();
  36.         map.addOverlay(ply);
  37.     }
  38.  
  39.     map.addEventListener("click", function (e) {
  40.         mkr.setPosition(e.point);
  41.         map.addOverlay(mkr);
  42.         //将点击的点的坐标显示在页面上
  43.         document.getElementById("lng").value = e.point.lng;
  44.         document.getElementById("lat").value = e.point.lat;
  45.  
  46.         InOrOutPolygon(e.point.lng, e.point.lat);
  47.     });
  48.  
  49.     function InOrOutPolygon(lng, lat){
  50.         var pt = new BMap.Point(lng, lat);
  51.         var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
  52.         if (result == true) {
  53.             document.getElementById("result").innerHTML = "在区域范围内";
  54.         } else {
  55.             document.getElementById("result").innerHTML = "在区域范围外";
  56.         }
  57.     }
  58. </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. 解决无线网卡 RTL8723BE ubuntu环境下不稳定情况

    jiqing@ThinkPad:~$ lspci | grep -i net 00:19.0 Ethernet controller: Intel Corporation Ethernet Conne ...

  2. 对腾讯云服务器linux系统进行分区格式化操作

  3. Elasticsearch创建文档，利用Kibana进行创建文档

    首先先来了解一下什么是文档,es里边的文档相当于mysql数据库里边的一张表,如果你用过mongodb的话,那么肯定对es这种数据格式一定很了解了.接下来我们来看一下如何创建一个文档. PUT /sd ...

  4. JavaScript--什么是函数

    函数是完成某个特定功能的一组语句.如没有函数,完成任务可能需要五行.十行.甚至更多的代码.这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦. 如何定义一 ...

  5. BZOJ 4140 凸包+二进制分组

    思路: $(x_0-x)^2+(y_0-y)^2<=x^2+y^2$ $y>=(-x_0/y_0)x+(x_0^2+y_0^2)/2y0$ 这显然就是凸包了 以一个斜率不断向下(上)走   ...

  6. 【转】Linux命令学习手册-split命令

    转自:http://blog.chinaunix.net/uid-9525959-id-3054325.html split [OPTION] [INPUT [PREFIX]] [功能]将文件分割成多 ...

  7. Squirrel的安装(windows上Phoneix可视化工具)

    一．下载安装 下载地址:http://www.squirrelsql.org/下载所需版本       或者 从网址http://www.squirrelsql.org/下载相应版本的squirrel ...

  8. PHP开发之旅-提取表单提交内容发送邮件

    在实际项目开发中,我们经常需要得到用户的反馈信息并及时回复.普通的留言板有一定的内容限制,而邮件则能满足这个需求.今天给大家演示一下怎么利用PHP发送电子邮件. 1.创建表单 <form nam ...

  9. CentOS配置网卡以及克隆

    上一篇的虚拟机安装完成后是可以上网的,但是ip地址是动态的,因为后期的需要,我们要配置下网卡,改成静态的IP地址 1.打开终端,输入 ifconfig 查看虚拟机中的网卡,发现时ens33而不是平常见 ...

  10. UVM基础之--------uvm_root

    uvm_root 是uvm的顶层实例扮演了一个top-level and phase controller 的作用,对于component来说.该类不需要用户实例化,他是一个自动实例化了的类,用户直接 ...