网站建设对企业带来什么作用,儿童编程教学入门教程,服务器,西安有几个区需求描述
需要在前端页面中使用地图定位功能#xff0c;所以在前端umi项目中使用百度地图服务#xff0c;由于umi项目默认没有入口的html文件#xff0c;所以无法通过常规的在head中加入外链js的方式使用
百度ak
zyqeLCzvQPCCNImRu9yRGOqWlEUicxxGreact使用百度api 链接:…需求描述
需要在前端页面中使用地图定位功能所以在前端umi项目中使用百度地图服务由于umi项目默认没有入口的html文件所以无法通过常规的在head中加入外链js的方式使用
百度ak
zyqeLCzvQPCCNImRu9yRGOqWlEUicxxGreact使用百度api 链接: 百度地图api链接
解法方法
看清楚有两种方法
第一种方式 用umi-plugin 插件的方式把链接加到页面上 在src/page下 新建文件 plugins/customPlugin.js
/**
* customPlugin.js
*/
export default (api, opts) {// 在HTML尾部添加脚本 api.addHTMLScripts(() {return [{// 百度地图type:text/javascript,src://api.map.baidu.com/api?typewebglv1.0ak你的百度秘钥ak}]})}在umirc.ts中导入本地新建的插件文件customPlugin.js
/**
* umirc.tsumi项目默认配置文件
*/
import { defineConfig } from umi;export default defineConfig({nodeModulesTransform: {...},dva: {},routes: [...],fastRefresh: {},plugins: [./src/plugins/customPlugin.js] //添加一个plugins插件
});新建一个jsx文件将你需要的代码填写到里面
注意!!!
使用npm方式安装react组件库然后通过es模块加载
npm install react-bmapgl --save
因为本人使用的是tsx 所以会有下划线报错 import { Map } from react-bmapglfunction Example() {return (Mapstyle{{ height: 450 }}center{new BMapGL.Point(116.404449, 39.914889)}zoom{12}heading{0}tilt{40}onClick{(e:any) console.log(e)}enableScrollWheelZoom/)
}export default Example第一种使用方法 效果图 第二种方式 手动添加document.ejs文件
在src/page下新建document.ejs文件
!Doctype html
html
headmeta charsetutf-8 /meta nameapple-mobile-web-app-capable contentyes/meta nameapple-mobile-web-app-status-bar-style contentblack/meta nameformat-detection contenttelephoneno/meta nameformat-detection contentemailno/meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno /title /titlescript src//api.map.baidu.com/api?v3.0ak你的百度地图AK码/script
/head
body
div idroot/div
/body
/html前端代码
import React, { useEffect } from react;
import { Modal } from antd;/*** 新建考勤地点模态框* */
export default function XjkqddModal(props) {const { modalVisible, setModalVisible } props; // 模态框状态useEffect(() {renderMap();}, []);const renderMap () {var map new BMap.Map(container, {coordsType: 5});var point new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图设置中心点坐标和地图级别};return (Modaltitle考勤地点visible{modalVisible}onOk{() setModalVisible(false)}okText确定onCancel{() setModalVisible(false)}cancelText取消width{1000}forceRenderdiv idcontainer style{{ width: 300, height: 300 }} //Modal)
}报错
注意点
Antd 4.x的modal在import进页面时是仅仅挂载没有渲染其中的DOM结构所以取不到map实例挂载的 DIVmodal的API中有个forceRender的属性加上后modal挂载的同时会把DOM渲染出来 初始化地图实例要在render后执行不然会取不到DIV容器 地图容器DIV一定要指定宽高地图并不会撑开DIV而是把你设置宽高的DIV撑满
