uiwjs / react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-baidu-map
MIT License
225 stars 22 forks source link

【MapTypeControl 地图类型控件】三维地图展示失败。 #101

Open brightzoe opened 3 years ago

brightzoe commented 3 years ago

我自己的项目三维地图请求失败500, 查看文档,文档中的切换为三维地图也挂了,报错500. 文档链接:link lbs baidumap的三维地图可以正常显示的。link

引用项目的报错: image

jaywcjlove commented 3 years ago

@brightzoe 看你报错信息,你应该申请 akey 然后需要什么权限? 我看都是百度资源报错。

brightzoe commented 3 years ago

@jaywcjlove

@brightzoe 看你报错信息,你应该申请 akey 然后需要什么权限? 我看都是百度资源报错。

文档中也是报错的。(https://uiwjs.github.io/react-baidu-map/#/map-type-controlimage

我的akey地图&&卫星都是正常的,和文档情况一致。未发现需要什么另外的权限。

jaywcjlove commented 3 years ago

@brightzoe 看 了一下 3d 是属于老的空间新的不是这样的

image

jaywcjlove commented 3 years ago

@brightzoe

⚠️ 这个类型空间是属于来的地图空间,加载新的 3D地图控件实例,需要设置参数 type=webgl&v=1.0 并且需要自己实现。

// <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var map = new BMapGL.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
map.addControl(navi3DCtrl);
jaywcjlove commented 3 years ago

在组件上传递参数 type="webgl",此时 window.BMap 对象为 undefined,在组件中做了自动处理 window.BMap = window.BMapGL

<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f" type="webgl" version="1.0">
  <Example />
</APILoader>
jaywcjlove commented 3 years ago

Upgrade + @uiw/react-baidu-map@1.18.3