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

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

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

基于上一篇百度地图–获取自定义区域JSON数据（上）的准备工作后，开始正式绘图：
第一步：创建react项目（我的目录结构如图）
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>

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();

核心部分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;

项目搭建步骤、操作步骤（因为这只是一天的内容，没有做其他详细的逻辑控制，最好按照我的给定步骤操作，遇到问题可以查看代码，基本上代码比较简单，容易上手）
搭建步骤
a、创建react项目（npm install -g create-react-app）我这里使用的这个命令（个人感觉这个是创建最快的），详细搭建方式点击参考react搭建；
b、整理资源（主要是图片资源）
c、创建类似我的目录结构（方便你直接使用）；
d、创建完成后启动你的项目（npm start/yarn start）;

操作步骤
a、地图上建议随机选择三个以上的点（图嘛，至少三点成图），建议选点不在一条直线上。

b、点击下方的【绘图】（把线变成图）

c、点击【可拖拽】：生成拖拽点，然后你就可以随意拖拽点生成你想要的区域图。

d、你可以把鼠标放在生成选点上，鼠标右键可以删除当前点（建立在可拖拽的情况下）

e、点击【不可拖拽后选点上将不会有序号】；
f、点击【清除】将清空所有数据，重新绘图；
g、点击json数据，将在后台打印出，你选择的数据（至于这种JSON的解析JSON.stringify()请参考我的另一篇文章我的JSON问题）；

h、点击测试自定义图标，可以修改原生图标为你自己的图标；

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

cc百川

发布了55 篇原创文章 · 获赞 29 · 访问量 5万+

私信关注

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

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

猜你喜欢