Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

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

Package Overview
Dependencies
Maintainers
0
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Baidu Map api-loader Components for React.

  • 2.7.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
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

Package last updated on 24 Jun 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc