umi/react中使用百度地图API

umi中使用百度地图API

首先第一步/按照步骤来

打开网址：百度地图开放平台 | 百度地图API SDK | 地图开发

第二步 /按照步骤来

如果没有帐号需要注册（按照步骤注册）/（有账号的可忽略）

点击控制台，进入应用管理，点击我的应用，进入创建应用

按照步骤一步步来

 选择应用类型：浏览器端

第三步/按照步骤来

来到我的应用配置过的直接复制AK码，没有的话点击创建应用，根据自己需要申请就行

第四步/ 按照步骤来

在config文件中或者是.umirc.ts中配置引入AK密钥

import { defineConfig } from 'umi';

export default defineConfig({
  headScripts: [
     //密钥要写自己的，就是刚刚复制的那个AK码
    'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak密钥',
  ]
});

第五步 / 按照步骤来

在src/pages文件下创建一个文件夹，例如Map/index.jsx放入以下代码

import React from 'react'
import { useEffect } from 'react'

export default function Map() {

  useEffect(()=>{
    const BMapGL = window.BMapGL
    // console.log(BMapGL);
    // 创建地图实例
    var map = new BMapGL.Map("container");
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    // 添加控件和标注
    map.addControl(new BMapGL.NavigationControl());
    var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
    map.addOverlay(marker);
    
    // 添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl();  
    map.addControl(cityCtrl);

    // 添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl();  
    map.addControl(scaleCtrl);

    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl();  
    map.addControl(zoomCtrl);
  },[])

  return (
    

        //地图大小根据自己需要设置即可
      

    
  )
}

效果演示：

umi地图效果

#

#

#

react中使用百度地图API

第一步 / 按照步骤来

第二步 / 按照步骤来

第三步 / 按照步骤来

以上步骤相同（重复就不写了）

第四步 / 按照步骤来

在react文件中，在找到public/index.html中加入一行代码

//ak后面是你的Ak码，官网复制过来，以防出错

 第五步 / 按照步骤来

在src/App.js文件中引入，或者是自己在src下创建一个文件，例如Map/index.js

import React, { useEffect } from 'react'

export default function App() {
  useEffect(()=>{
    // 引入全局对象
    const BMapGL = window.BMapGL;
    // 创建地图实例 
    var map = new BMapGL.Map("container");     
    // 创建点坐标      
    var point = new BMapGL.Point(116.404, 39.915);  
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);    
    //开启鼠标滚轮缩放             
    map.enableScrollWheelZoom(true);     

    // 添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl();  
    map.addControl(scaleCtrl);
    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl(); 
    map.addControl(zoomCtrl);
    // 添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl();  
    map.addControl(cityCtrl);
  },[])
  return (
    

      

    
  )
}

效果演示：

react地图效果