Socket
Socket
Sign inDemoInstall

@uiw/react-baidu-map-api-loader

Package Overview
Dependencies
9
Maintainers
2
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-baidu-map-api-loader

Baidu Map api-loader Components for React.


Version published
Maintainers
2
Weekly downloads
1,119
decreased by-11.75%

Weekly downloads

Readme

Source

APILoader

Buy me a coffee npm version Downloads

用于加载百度地图 SDK 依赖,加载完成,全局将会有 window.BMap 对象。

  • 自动加载百度地图 SDK 依赖
  • 避免重复加载 SDK 依赖
import { APILoader } from '@uiw/react-baidu-map';
// 或者单独安装使用
import APILoader from '@uiw/react-baidu-map-api-loader';

基本用法

Map 的父组件必须具有宽度和高度;

🚧 注意:如果你不使用 APILoader 组件,需要手动将 SDK 引入到 HTML 中。

<script
  type="text/javascript"
  src="http://api.map.baidu.com/api?v=3.0&ak=eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG&callback=load_bmap_sdk"
>
</script>
import React from 'react';
import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Map autoLocalCity style={{ height: 350 }} />
    </APILoader>
  </div>
);

export default Demo;

禁用 SDK 加载

收到一个需求,希望自己在 html 中引入 SDK,不需要自动加载,可以使用 disableScripts 禁用,在 html 中自己手动添加

<APILoader disableScripts>
  <Map style={{ height: 100, marginBottom: 10 }} />
</APILoader>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

Props

参数说明类型默认值
akay必填 disableScripts=true选填 您需先申请密钥(ak)才可使用该服务,接口无使用次数限制,请开发者放心使用。string-
versionSDK 版本string3.0
protocol协议,默认是根据当前网站协议的http/httpswindow.location.protocol
hostAndPath请求 SDK 的前半部分stringapi.map.baidu.com/api
type可选使用百度的 webgl 地图webgl-
disableScripts禁用 SDK 加载boolean-

Keywords

FAQs

Last updated on 23 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc