百度地图--获取自定义区域JSON数据（下）

╰半橙微兮° 2022-05-04 01:28 1150阅读 0赞

## **基于百度地图的自定义区域绘图–绘制区域** ##

代码暂时存放在百度云盘中（不包含依赖文件）：链接: [https://pan.baidu.com/s/1Ps-V262ZdUDFtH2hEfD4lQ][https_pan.baidu.com_s_1Ps-V262ZdUDFtH2hEfD4lQ] 提取码: 3q9z；  
**这里代码太多了，建议下载后解压代码进行查看。**

1.  基于上一篇 [百度地图–获取自定义区域JSON数据（上）][JSON]的准备工作后，开始正式绘图：  
    第一步：创建react项目（我的目录结构如图）  
                                                                    ![在这里插入图片描述][70]
2.  index.html内容：

<!DOCTYPE html>
    <html lang="en" style="width:100%; height:100%;">
      <head>
          <style>
           /*清除logo*/
            .BMap_cpyCtrl { 
                display: none;
            }
            .anchorBL {
                display: none;
            } 
         </style>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="%PUBLIC_URL%/urltitle.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
        <title>React App</title>
          <script src="http://api.map.baidu.com/api?v=1.2&ak=kDfrUwYGgSaUbDLwKGXBwlaseKZbI7I9" type="text/javascript"></script>
          <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    	    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    	    
    	    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    	    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /> 
    
      </head>
      <body style="width:100%; height:100%;"> 
        <noscript>
          You need to enable JavaScript to run this app.
        </noscript>  
        <div id="root" style="width:100%; height:90%;"></div>  
      </body>
    </html>

1.  src下的index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './StyleCc/index.css';
    import App from './ComCc/App';
    import BaiduMap from './ComCc/BaiduMap';//引入我的地图组件
    import * as serviceWorker from './JSCc/serviceWorker';
    
    ReactDOM.render(<BaiduMap />, document.getElementById('root')); //插入到html的id为root的标签中
    
    serviceWorker.unregister();

1.  核心部分BaiduMap.js（**代码比较多建议直接复制【即src/Comcc/BaiduMap.js】**），故此这里不粘贴大量代码，请你下载我的代码即可（**文章开始处有下载链接**），永久有效，建议到第五步：见操作步骤

import React, { Component } from 'react';
    import $ from 'jquery';
    var overlays = [];
    const { BMap, BMAP_STATUS_SUCCESS,BMAP_NORMAL_MAP,BMAP_HYBRID_MAP ,BMapLib, BMAP_ANCHOR_TOP_RIGHT} = window ;
    var map ;  
    /*
    **请下载代码，查看src/Comcc/BaiduMap.js即可（文章开始处有下载链接）**
    */
    export default BaiduMap;

1.  项目搭建步骤、操作步骤（因为这只是一天的内容，没有做其他详细的逻辑控制，最好按照我的给定步骤操作，遇到问题可以查看代码，基本上代码比较简单，容易上手）  
    **搭建步骤**  
    a、创建react项目（npm install -g create-react-app）我这里使用的这个命令（个人感觉这个是创建最快的），详细搭建方式点击[参考react搭建][react]；  
    b、整理资源（主要是图片资源）![在这里插入图片描述][70 1]  
    c、创建类似我的目录结构（方便你直接使用）；  
    d、创建完成后启动你的项目（npm start/yarn start）;
    
    操作步骤  
    a、地图上建议随机选择三个以上的点（图嘛，至少三点成图），建议选点不在一条直线上。  
    ![在这里插入图片描述][70 2]  
    b、点击下方的【绘图】（把线变成图）  
    ![在这里插入图片描述][70 3]  
    c、点击【可拖拽】：生成拖拽点，然后你就可以随意拖拽点生成你想要的区域图。  
    ![在这里插入图片描述][70 4]  
    d、你可以把鼠标放在生成选点上，鼠标右键可以删除当前点（建立在可拖拽的情况下）  
    ![在这里插入图片描述][70 5]  
    e、点击【不可拖拽后选点上将不会有序号】；  
    f、点击【清除】将清空所有数据，重新绘图；  
    g、点击json数据，将在后台打印出，你选择的数据（至于这种JSON的解析JSON.stringify()请参考我的另一篇文章[**我的JSON问题**][JSON 1]）；  
    ![在这里插入图片描述][70 6]  
    h、点击测试自定义图标，可以修改原生图标为你自己的图标；  
    ![在这里插入图片描述][70 7]

--------------------

总结：这个是今天大致写的demo还有待完善，很多逻辑还没有处理，但是按照步骤得到数据，以及演示，具体逻辑大家可以自行完善。  
请大家多多指教。谢谢

[https_pan.baidu.com_s_1Ps-V262ZdUDFtH2hEfD4lQ]: https://pan.baidu.com/s/1Ps-V262ZdUDFtH2hEfD4lQ
[JSON]: https://blog.csdn.net/ljcc122/article/details/83268917
[70]: /images/20220504/4092c57a19e64ed683aa1e0456bae18a.png
[react]: http://www.php.cn/js-tutorial-394459.html
[70 1]: /images/20220504/82ab33ea538d45ae93abef9c6c5b8279.png
[70 2]: /images/20220504/00c002031a534f74bf7d0ea641bb009b.png
[70 3]: /images/20220504/64f68b6ff95b4e88bbca14b54c01fb4a.png
[70 4]: /images/20220504/d04aa75e95ce40ff8b34e725162c2fd7.png
[70 5]: /images/20220504/8579e5f45a704f04b81f6d5c296bfb65.png
[JSON 1]: https://blog.csdn.net/ljcc122/article/details/83032834
[70 6]: /images/20220504/97b0213d6637446fb64be6d05a72d887.png
[70 7]: /images/20220504/d2bdda8c6970404d9517f5176909f758.png