ElemeFE / react-amap

基于 React 封装的高德地图组件。AMap Component Based On React.
https://elemefe.github.io/react-amap/articles/start
MIT License
1.04k stars 151 forks source link

如何修改源码使其支持AMapUI组件库(因为需要轨迹展示)(自己尝试修改,但未成功) #55

Closed unionTime closed 7 years ago

unionTime commented 7 years ago

版本 1.0.1 macOS/Chrome 53

我看了没有提供 UI组件库API (没有引用);我想尝试修改源码,增加创建一个script元素 <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> 因此我做了一下尝试: 一、直接在index.html文件上增加以下标签,原生增加 `

` AMapUi可以正常使用,轨迹展示成功运行,但是react-amap提供的能力全部失效,应该是变量被覆盖了 二、深入react-amap源码,寻找创建script元素的地方,增加一个方法 创建引入ui库的script [源码位置](https://github.com/ElemeFE/react-amap/blob/master/components/utils/APILoader.js) 新增如下: ` var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.defer = true; script.src = this.getScriptSrc(_config); //创建引入 amapui api (新增) const amapui = () => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "//webapi.amap.com/ui/1.0/main.js?v=1.0.11"; console.log(script); } var scriptLoadingPromise = new Promise(function (resolve, reject) { window[_config.callback] = function () { queuedLoader.forEach(function (event) { return event(); }); //amap成功创建后,创建amapui的 console.log(script); amapui(); resolve(); }; script.onerror = function (error) { return reject(error); }; }); document.head.appendChild(script); __script_loaded = true; return scriptLoadingPromise; }` 结果:react-amap正常使用,AMapUI依然没有定义(但是我已经创建了啊) e0fcf545-d5a3-48ef-940d-9e1ae6119527 我看的你vue 相关的创建方式 [vue创建amapui的方式](https://github.com/ElemeFE/vue-amap/blob/dev/src/lib/services/lazy-amap-api-loader.js) 需求:请问我应该如何创建引入AMapUi才能正常使用? 我已经找到问题了,低级错误,创建了script DOM元素,却没有插入页面 修改如下: ` const amapui = () => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "//webapi.amap.com/ui/1.0/main.js?v=1.0.11"; document.head.appendChild(script) //插入页面 console.log(script); } ` 存在的问题:AMapUi不在受react生命周期控制,无法时时更新数据 期望:希望维护者提供更加优雅的方式,谢谢
ioslh commented 7 years ago

@unionTime 已更新 v1.1.1 版本,支持加载 AMapUI 组件库。