React17 + 百度地图API 渲染地图组件

最新推荐文章于 2022-10-25 11:48:12 发布
最新推荐文章于 2022-10-25 11:48:12 发布
阅读量287 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/113729707
版权

注册百度地图开发者账号，获取 AK

在这里插入图片描述

选择 javascript api
在这里插入图片描述
开发者文档地址 http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld

（项目演示 v2.0 版本）

React 目录中 public 文件夹下的 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    // ...
    <title>React App</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写自己的AK"></script>
  </head>
  <body>
    // ...
  </body>
</html>

新建一个 map.js（根据自己的需求决定）

思路：通过接口获取后端的数据，将数据渲染到 BMap 中

import React from 'react'
import { Card } from 'antd'
import axios from '../../axios/index'

export default class BikeMap extends React.Component {

  state = {
    bickeInfo: {}
  }

  map = {}

  requestList = () => {
    axios.ajax({
      url: '/map/bike_list',
      data: {
        params: this.params
      }
    }).then((res) => {
      if (res) {
        this.setState({
          total_count: res.result.total_count
        })
        this.renderMap(res.result);
      }
    })
  }

  componentDidMount() {
    this.requestList()
  }

  // 渲染地图
  renderMap = (res) => {
    let list = res.route_list;
    this.map = new window.BMap.Map("container", { enableMapClick: false });
    // 起点
    let gps1 = list[0].split(',');
    let startPoint = new window.BMap.Point(gps1[0], gps1[1]);
    // 终点
    let gps2 = list[list.length - 1].split(',');
    let endPoint = new window.BMap.Point(gps2[0], gps2[1]);

    // 确定中心点，缩放比例
    this.map.centerAndZoom(endPoint, 11);
    

    //添加起始图标
    let startPointIcon = new window.BMap.Icon("/assets/start_point.png", new window.BMap.Size(36, 42), {
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42)
    });

    var bikeMarkerStart = new window.BMap.Marker(startPoint, { icon: startPointIcon });
    this.map.addOverlay(bikeMarkerStart);

    let endPointIcon = new window.BMap.Icon("/assets/end_point.png", new window.BMap.Size(36, 42), {
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42)
    });
    var bikeMarkerEnd = new window.BMap.Marker(endPoint, { icon: endPointIcon });
    this.map.addOverlay(bikeMarkerEnd);

    let routeList = [];
    list.forEach((item) => {
      let p = item.split(",");
      let point = new window.BMap.Point(p[0], p[1]);
      routeList.push(point);
    })
    // 行驶路线
    var polyLine = new window.BMap.Polyline(routeList, {
      strokeColor: "#ef4136",
      strokeWeight: 3,
      strokeOpacity: 1
    });
    this.map.addOverlay(polyLine);

    // 服务区路线
    let serviceList = res.service_list;
    let servicePointist = [];
    serviceList.forEach((item) => {
      let point = new window.BMap.Point(item.lon, item.lat);
      servicePointist.push(point);
    })
    // 画线
    var polyServiceLine = new window.BMap.Polyline(servicePointist, {
      strokeColor: "#ef4136",
      strokeWeight: 3,
      strokeOpacity: 1
    });
    this.map.addOverlay(polyServiceLine);

    // 添加地图中的自行车
    let bikeList = res.bike_list;
    let bikeIcon = new window.BMap.Icon("/assets/bike.jpg", new window.BMap.Size(36, 42), {
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42)
    });
    bikeList.forEach((item) => {
      let p = item.split(",");
      // p[0], p[1] 经纬度
      let point = new window.BMap.Point(p[0], p[1]);
      var bikeMarker = new window.BMap.Marker(point, { icon: bikeIcon });
      this.map.addOverlay(bikeMarker);
    })

    // 添加地图控件
    this.addMapControl();
  };

  // 添加地图控件
  addMapControl = () => {
    let map = this.map;
    // 左上角，添加比例尺
    var top_right_control = new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT });
    var top_right_navigation = new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT });
    //添加控件和比例尺
    map.addControl(top_right_control);
    map.addControl(top_right_navigation);
    map.enableScrollWheelZoom(true);
    // legend.addLegend(map);
  };

  render() {
    return (
      <div style={{width: '100%'}}>
        <Card style={{ marginTop: 10 }}>
          <div>共{this.state.total_count}辆车</div>
          <div id="container" style={{ height: 500 }}></div>
        </Card>
      </div>
    )
  }
}

返回的数据格式如下：

{
  "status": 200,
  "code": 0,
  "result": {
    "total_count": 100,
    "bike_list": [
      "116.356619,40.017782",
      "116.437107,39.975331",
      "116.34972,40.070808",
      "116.323849,39.964714",
      "116.404912,40.015129",
      "116.365243,39.958078"
    ],
    "route_list": [
      "116.353101,40.067835",
      "116.357701,40.053699",
      "116.374086,40.027626",
      "116.397801,40.01641"
    ],
    "service_list": [{
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
      {
        "lon": "116.316562",
        "lat": "40.144943",
        "ts": null
      },
      {
        "lon": "116.351631",
        "lat": "40.129498",
        "ts": null
      },
      {
        "lon": "116.390582",
        "lat": "40.082481",
        "ts": null
      },
      {
        "lon": "116.38742",
        "lat": "40.01065",
        "ts": null
      },
      {
        "lon": "116.414297",
        "lat": "40.01181",
        "ts": null
      },
      {
        "lon": "116.696242",
        "lat": "39.964035",
        "ts": null
      },
      {
        "lon": "116.494498",
        "lat": "39.851306",
        "ts": null
      },
      {
        "lon": "116.238086",
        "lat": "39.848647",
        "ts": null
      },
      {
        "lon": "116.189454",
        "lat": "39.999418",
        "ts": null
      },
      {
        "lon": "116.244646",
        "lat": "39.990574",
        "ts": null
      },
      {
        "lon": "116.281441",
        "lat": "40.008703",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      }
    ]
  }
}

渲染效果：
在这里插入图片描述

在这里插入图片描述

关注公众号：大明贵妇，回复 react 获取 react 资料，期待各位客官来临
在这里插入图片描述

淘淘是只狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解React和百度地图JavaScript
03-21
基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解React和百度地图JavaScript Api。
react
foXiNaiNai的博客
03-11 458
react echarts 百度地图 引入全国主要城市空气质量实例图 地图不显示–bmap 是调用的百度地图的API 需要在document.ejs引入
React渲染腾讯地图
weixin_45942304的博客
04-23 772
#首先你得在腾讯地图添加key 根据自己得需求添加，然后就可以获取到key值了 #安装腾讯地图插件，点击即可进入查看文档 import QQMap from ‘qqmap’; #代码如下，并带有搜索功能（仅供参考） import QQMap from 'qqmap'; componentDidMount() { this.initQQMap(); } initQQMap = () => { const { detailData } = this.state; con
主流框架（react、vue）引入百度地图方式汇总
前端小记
09-05 3070
首先到百度地图官网以开发者身份申请一个百度地图ak密钥。 百度地图api官方地址： https://lbsyun.baidu.com/index.php?title=jspopularGL React： 一、以组件化使用百度地图（React-BMapGL） 组件文档地址： https://gitee.com/mirrors/react-bmap?skip_mobile=true ...
React--百度地图之在线地图
qq_56514918的博客
01-13 665
前言：百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。 一、在百度官网获得自己的AK(密钥) 获取AK地址：百度地图开放平台 | 百度地图API SDK | 地图开发 二、组件内使用 引入public\index.html <script src="https://api.map.baidu.com/api?v=1.0.
react地图组件
小记心得
06-05 5083
最近项目中有此需求，react地图组件的开发：1 输入地址可查询出对应地图位置并标记点2 能返回经纬度，并提交服务端保存3 在地图上点击某一点，也能返回对应经纬度和地址信息4 国内，国外均可使用经过调研决定，采用谷歌地图和高德地图来封装组件，当渲染地图组件时，先试图请求谷歌map的api，若能访问则使用谷歌地图，若不能访问，则调用国内高德地图，框架环境：react+dva+antd+umiJs；其...
react-bmap:基于百度地图JavaScript API封装的React组件库
05-02
所以这里面地图相关的dom并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript Api，React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api，使我们在使用React的时候能更方便的使用百度...
react-google-map：React组件使用Google Maps API中的标记来渲染地图
02-03
React组件使用标记渲染Google Map。 您可以使用所有正式的Google Maps API功能。 安装 npm install --save react-google-map 如果您没有加载googleMaps的解决方案，则可以使用以下软件包： npm install --save ...
react-intersection-observer：交叉点的React组件API
02-05
React Intersection Observer是一个React组件，用作IntersectionObserver API的包装。 它是完全声明性的，并为您处理了所有必要的部分。 React Intersection Observer擅长： 重用实例：比较传递的选项 性能：明智...
React如何将组件渲染到指定DOM节点详解
12-12
但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。 例如就像下面的这样： 我们实际期待...
react-card-component：React卡组件Libaray
02-06
React卡组件 执照 麻省理工学院执照 安装 npm i react-card-componet 示例页面 用法（Parameta） Component卡 import { Card } from 'react-card-component' ; const NewCard = ( ) => < Card> < div> HelloWorld < / div > < / Card > ) ; Common Props风格 import { Card } from 'react-card-component' ; const NewCard = ( ) => < Car
react-art-map:使用 react-art 渲染地图图块
06-02
#ReactMap npm install react-art-map var React = require ( 'react' ) ; var ReactMap = require ( 'react-map' ) ; var { Map } = ReactMap ; var viewportWidth = function ( ) { return window . innerWidth - 100 ; } var viewportHeight = function ( ) { return window . innerHeight - 100 ; } var center = [ - 122.668197 , 45.525292 //Portland ] ; var App = React . createClass ( { getInit
react自定义属性渲染_使用react js在Google地图上动态渲染10000个自定义标记
weixin_26717681的博客
08-14 523
react自定义属性渲染First and foremost, if you wish to follow along with this article and possibly re-create the Google Map with ‘x’ amount of custom map markers…versioning is crucial. There are around three ...
React中使用百度地图
qq_60976312的博客
10-25 3042
React中使用百度地图
小地图案例：通过百度地图API将整个html渲染出地图
bootstrapsayno的博客
07-18 985
百度地图API接口文档，渲染超简单小地图。
react中使用百度地图_使用React中任何提供者的地图
weixin_26738395的博客
08-26 1042
react中使用百度地图There are several libraries to create Map views on React, most of them target only one provider, as the popular google-map-react and google-maps-react libraries for Google Maps. 有许多库可在Reac...
useEffect 中 return 函数的作用和执行时机
热门推荐
qq_43477721的博客
10-06 1万+
官网的代码 import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } Chat
React Hooks 详解（2022的第一篇文章，献给 React Hooks）
qq_43477721的博客
01-02 3547
什么是 React Hooks，React 一直提倡使用函数组件，但是有一些功能只有类组件具备，比如函数组件没有实例，没有生命周期函数，而 React 16.8 提出的 Hooks 概念可以在不编写 Class 的情况下，使用 React 特性。凡是 use 开头的 React API 都是 Hooks。 Hooks 解决的问题：类组件的状态逻辑难复用，层级冗余，复杂难以维护。比如在 componenDidMount中注册的事件或者其他逻辑，需要在componentWillUnmount 中卸载，编..
React 动效 Framer motion，给你的页面添加一点动感
qq_43477721的博客
11-27 3339
Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。 他们渲染的结果与对应的原生组件完全一致，并在其之上增加了一些动画和手势相关的props。 比如： <motion.div /> <motion.span /> <motion.h1 /> <motion.svg /> 使用与平常的插件相差无几。 npm install framer-motion 当然，这里还是有一点不一样的，如果直接在页面中.
react函数组件请求数据并渲染
最新发布
04-25
哦，您想了解如何在 React 函数组件中请求和渲染数据。下面是一些基本步骤： 1. 在函数组件中引入 `useState` 和 `useEffect` 钩子函数。 2. 使用 `useState` 钩子函数，初始化数据状态对象。例如： ``` const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值