Baidu Maps の公式ドキュメントの使用ガイドには次のように書かれています: </span></div> <div><span style="font-size: 16px"><strong><span style='font-family: "Microsoft YaHei"'>問題が発生しました: </span></strong></span></div> <div> <span style='font-family: "Microsoft YaHei"; font-size: 14px'><span style="color: #ff0000">上記のスクリプトをエントリ ファイル -index.html に導入した後、別の JS ファイルで BMap にアクセスすると、BMap が定義されていないというエラーが報告されました。</span></span> </div> <div> <span style='font-family: "Microsoft YaHei"; font-size: 14px'></span>問題の解決: </div> <div><strong><span style='font-family: "Microsoft YaHei"; font-size: 16px'></span>1. github にアクセスして、オープンソース SDK があるかどうかを確認します (存在する場合は、npm install を通じて依存関係パッケージをインストールします。そうすれば、BMap が導入されます)。 ——失敗しました。オープンソースの依存関係パッケージはまったくありません</strong></div> <div><span style='font-family: "Microsoft YaHei"; font-size: 14px'><span style="color: #ff0000">2. require('http..../*上記のスクリプトのアドレス* / '</span>) - 失敗、require または import はローカル リソース ファイルを直接 </span></div> 導入することしかできず、直接 <div> <span style='font-family: "Microsoft YaHei"; font-size: 14px'> 外部を導入する <span style="color: #ff0000"><em><strong></strong></em> 3. BMap を Window オブジェクトにバインドしてファイル間の訪問を実現します -成功！ <em>(実装は可能ですが推奨されません。実装のために実装されます) <strong></strong></em></span></span>4. webpack 出力オブジェクトの externals 属性を介して require アクセスを実装します</div>——成功! (推奨される方法) <div><span style='font-family: "Microsoft YaHei"; font-size: 14px'><span style="color: #ff0000"></span></span></div> <div><span style='font-family: "Microsoft YaHei"; font-size: 14px'><span style="color: #ff0000"></span></span></div> <div> 問題を再現します: </div> <div><span style='font-family: "Microsoft YaHei"; font-size: 14px'></span></div> <div> 私のディレクトリ: <span style="font-size: 16px"><strong><span style='font-family: "Microsoft YaHei"'></span></strong></span> </div>次のようになります: <div><span style='font-family: "Microsoft YaHei"; font-size: 14px'></span></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>/*剩下的部分自己想象*/<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥">/*剩下的部分自己想象*/ログイン後にコピー 私の test/index.js は次のようになります: import React from 'react' class Test extends React.Component{ componentDidMount () { var map = new BMap.Map("allmap") } render () {return () } }ログイン後にコピー ただし、Test のレンダリング時にエラーが報告されました: A前にいます私の場合: モジュール形式でアプリケーションを構築する場合、エントリ ファイル内の変数に JS モジュールで直接アクセスすることはできません それでは、エントリ HTML ファイル内の変数を JS ファイルにインポートするにはどうすればよいですか。 ? ? あるいは、この例では、test/index.js の HTML で導入されたスクリプトで BMap オブジェクトを取得するにはどうすればよいでしょうか? おそらく多くの学生はこう思うでしょう：エクスポート/インポートを使えばいいだけです！しかし、変数を HTML ファイルに直接エクスポートするのは明らかに合理的なアプローチではありません 方法 1: Window オブジェクトを使用して BMap 変数を保存し、HTML ファイルと JS ファイル間の変数転送を実現します: 在引入百度地图的脚本下再加入这一段脚本： window.BMap = BMapログイン後にコピー 没错，就是把BMap对象保存到全局可访问的window对象中 当要使用BMap的时候这样用： BMap = window.BMap map = BMap.Map("allmap");ログイン後にコピー 例子如下： import React from 'react'import ReactDOM from 'react-dom'class BaiduMap extends React.Component { 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 ( ) } } ReactDOM.render(, document.getElementById('root') )ログイン後にコピー demo: 方法二.通过webpack的externals加载BMap使它可以通过require或import引入 在webpack.config.js中 module.exports = {/*此处省略了entry，output,modules等配置*/ externals:{ 'BMap':'BMap' }, }ログイン後にコピー 在使用到BMap的时候，这样引入： import BMap from 'BMap'var map = new BMap.Map("allmap"); // 创建Map实例//通过map调用APIログイン後にコピー 例子： import React from 'react'import ReactDOM from 'react-dom'import BMap from 'BMap'class BaiduMap extends React.Component { componentDidMount () { 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 ( ) } } ReactDOM.render( , document.getElementById('root') )ログイン後にコピー webpack的externals的具体作用我概括为两点： 1.写入externals中的依赖是不会被打包进最后的bundle里面的 2.虽然它不会被打包，但在程序运行的时候你仍然能通过模块化的方式去引入这些依赖，如commonJS,AMD,ES6的import等 （原文：Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.） demo同上： 百度地图新手（尤其是用react的）容易犯的错误及其解决方式： 1.忘记写这个元素(id不一定要是allmap,只要和 new BMap.map（参数）里的字符串参数相同便可) 然后控制台就会报：TypeError: Cannot read property 'gc' of undefined的错误 解决方法：记得写 2.你写入了，但还是报了TypeError: Cannot read property 'gc' of undefined的错误，你可能犯了一个原生JS码农不太可能会犯但是react码农可能会犯的错误：你在渲染前就执行了 var map = new BMap.Map("allmap");这一行代码 例如： render () { var map = new BMap.Map("allmap"); // 创建Map实例 return () ) }ログイン後にコピー 解决办法：在渲染后才执行var map = new BMap.Map("allmap"); 例如将初始化map的代码放入组件类的 componentDidMount （）钩子函数中（这个函数将在组件被初次渲染完毕后调用） 例如： class BaiduMap extends React.Component { componentDidMount () { var map = new BMap.Map("allmap"); // 创建Map实例} render () { return ) }ログイン後にコピー 3.你写入了，控制台也没有报错，但是你就是看！不！到！地！图！ 这多半是你没有给加上宽高，百度地图的API是不会给你的div加宽高的，所以height默认是0就是0 解决方法：给目标地图div加上宽高（严格地说是高，宽默认为width:auto） render () {return }ログイン後にコピー 为此，我写了一封反馈的信件给百度地图的工作者们，目前在等待回应中（希望能有所回应吧） 以下为详细内容： 亲爱的百度地图开发者您好，作为一名react框架开发者，我在入门百度地图API时遇到困难——我不知道如何在模块化JS中使用BMap的API（问题现已解决）。因为你们只提供了原生JS下的入门指导，而没有任何关于模块化JS编程下的指导内容。这对于一些框架新手来说确实有些难以下手 我遇到的问题是：在引入携带AK的script的前提下，在一个JS模块文件（不是入口文件）中使用BMap报错："error! BMap is not defined!" 我的解决法是通过在Webpack输出对象中的externals属性中加入BMap:"BMap"，然后通过在对后在对应的JS页面中通过Window.BMap取得。 希望你们能够提供更为详细的操作指导，例如webpack下BMap的用法。这将让你们的产品变得更好。 以上 —— 某个爱好javaScript的大二学生
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
