react 自定义百度地图，BMap组件

2024-04-06 02:27•linux•阅读 3742

1.html 页面引入相关js

public/index.html

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
    <link href="lib/baidumapv2/css/baidu_map_v2.css" rel="stylesheet" type="text/css"/>
    <script src="lib/baidumapv2/baidumap_offline_v2_load.js"></script>
    <script src="lib/baidumapv2/tools/TextIconOverlay_min.js"></script>
    <script src="lib/baidumapv2/tools/MarkerClusterer_min.js"></script>
    <script>
      // 实例化 百度地图
      window.BMap = BMap;
      window.BMapLib = BMapLib;
    </script>
  </head>
  <body>
    <div ></div>
  </body>
</html>

2.创建 BMap 组件

src/components/BMap/index.js

/**
 * 百度地图 组件
 */
import React,{ PureComponent } from 'react';
// 获取屏幕宽高
const width = document.documentElement.clientWidth + 'px';
const height = document.documentElement.clientHeight - 95 + 'px';

class BMap extends PureComponent {
  // 构造函数
  constructor(props) {
    super(props);

    this.state = {
      //
    };
  }

  // 生命周期
  componentDidMount () {
    var BMap = window.BMap
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  }

  render(){
    return (
      <div  style={{width:width,height:height}}></div>
    )
  }
}

export default BMap;

上一篇 »干掉baidu地图Logo的CSS
下一篇 »php 腾讯地图和百度地图的相互转换

react 自定义 百度地图，BMap组件

相关推荐

获取网站地图自动推送的PHP代码

php百度地图计算两地现实距离

Java百度地图经纬度纠偏

jquery+baidu map api 仿安居客地图找房源，基于百度地图

delphi 调用百度地图api

React表单组件自定义-可控及不可控组件

[Swift通天遁地]二、表格表单，10快速添加日期选择/多选/动作表单/地图等自定义表单

vscode编辑器开发react时，设置使emmet支持自定义组件

react 自定义百度地图，BMap组件