百度地图电子围栏功能的实现

最新推荐文章于 2023-08-08 15:26:14 发布

weixin_34348805

最新推荐文章于 2023-08-08 15:26:14 发布

阅读量1.9k

点赞数 2

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_20190416.html

版权

本文详述了如何实现百度地图电子围栏功能，包括从官方库下载鼠标绘制多边形功能，获取多边形顶点坐标，根据已知坐标绘制多边形，判断坐标点是否在区域内，以及在数据库中存储坐标点的方法。通过实例代码和步骤演示，帮助读者理解并实现相关功能。

摘要由CSDN通过智能技术生成

最近公司项目需求，要做一个百度地图电子围栏的功能，在网上查了一下资料，看了很多博客，大多数都写的不是很详细，我看的云里雾里的，最后终于集合所有的几篇资料，自己做出了一个简单的demo，下面将过程记录和分享一下，希望给予有需要同学一些帮助，我这个人说话比较啰嗦，所以写的一定会很详细的，哈哈！闲言少叙，开始了。

本篇内容实现的过程中将会解决如下几个问题：

（1）实现百度地图鼠标绘制多边形功能；

（2）实现根据给定的坐标绘制多边形的功能；

（3）判断某个坐标点是否在绘制的区域内；

（4）绘制的坐标点如何在数据库中保存；

下面按照实际需求一步一步来讲解和实现：

1 实现多边形绘制功能

1.1 从百度地图官方库下载鼠标绘制多边形功能demo

　　如何绘制一个多边形，我在看网上博客的时候，大部分人都是直接贴一堆代码上来，我最开始一直迷迷糊糊，以为是别人自己写的代码，所以得逐句去读，很烦。后来干脆直接去官方文档上去找，就来果然找到了，原来这个功能，百度地图官方有现成的实现，直接copy那部分代码就可以用。

1>百度搜百度地图开放平台>开发文档>web开发>JavaScript API >示例DEMO >鼠标示例 > 鼠标绘制点线面

进入这个地方就可以看到示例代码了，如下：

可以把中间的代码复制到自己的html页面中，更改一下百度密钥，打开代码就能看到效果了。

需要注意的是：改代码中用到的几个js文件，不要忘了添加。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html{
    width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap {
    width: 100%; height:500px; overflow: hidden;}
    #result {
    width:100%;font-size:12px;}
    dl,dt,dd,ul,li{
    
        margin:0;
        padding:0;
        list-style:none;
    }
    p{
    font-size:12px;}
    dt{
    
        font-size:14px;
        font

最低0.47元/天解锁文章

weixin_34348805

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
百度地图电子围栏功能的实现

最近公司项目需求，要做一个百度地图电子围栏的功能，在网上查了一下资料，看了很多博客，大多数都写的不是很详细，我看的云里雾里的，最后终于集合所有的几篇资料，自己做出了一个简单的demo，下面将过程记录和分享一下，希望给予有需要同学一些帮助，我这个人说话比较啰嗦，所以写的一定会很详细的，哈哈！闲言少叙，开始了。本篇内容实现的过程中将会解决如下几个问题：（1）实现百度地图鼠标绘制多...
复制链接

扫一扫