使用百度地图个性化地图加载会出现白块的解决方法

前几天发现大屏展示地图总是出现白块没加载完
本来以为是网络不好,加载慢,但是说一直有这个问题
然后其他使用百度地图默认样式的时侯加载很快,只有使用个性化地图慢

还有就是打印台会报警告,大概意思就是在页面上使用document.write()来动态插入外部的脚本会阻塞页面的解析,延迟页面的显示,甚至加载脚本失败,最终导致页面不能正确显示

本来以为这是两个问题,后来发现是一个问题导致的

百度了一下,第一种说是使用bmap.setMapStyle({ styleJson: myStyleJson });造成的
所以要把这个代码改成map.setMapStyleV2(mapStyle);
不知道是不是我用的方法不对还是怎么,反正不生效

第二种就是改引入链接,如果是vue项目,就在public的index里,改成动态加载的链接
错误引入:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ak&s=1"></script>

正确写法:

<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=ak&s=1"></script>

然后就成功了,打印台警告也没了,也不会出现白块

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: Cesium是一款强大的地图引擎,可以实现三维地图的展示和交互。而百度地图则是目前中国最广泛使用地图服务。通过将Cesium与百度地图结合起来,不仅可以为用户提供更加真实、立体的地图显示效果,还能够利用百度地图的丰富数据资源。 如果要将个性化百度地图URL加载到Cesium中,首先需要使用Cesium提供的ImageryLayer类,将百度地图的图像作为一个层添加到地图上。这可以通过以下代码实现: ``` var imageryProvider = new Cesium.UrlTemplateImageryProvider({ url : 'http://maponline1.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20180417&scaler=1', credit : '百度地图' }); var imageryLayer = new Cesium.ImageryLayer(imageryProvider); viewer.imageryLayers.add(imageryLayer); ``` 其中,URL中的{x}、{y}、{z}表示地图瓦片的行、列、层级,这里使用的是百度地图的全球瓦片服务(tiles.map.bdimg.com),可以根据需要进行更改。 通过这样的方式,即可在Cesium中加载个性化百度地图URL,实现更加个性化地图展示效果。同时,也可以在这个基础上实现自定义的地图标记、交互等功能,为用户提供更加丰富、多样的地图应用体验。 ### 回答2: Cesium是一款强大的三维地图引擎,可以用来创建复杂的地球和空间场景。它可以与各种开放地图服务(如Google地图和OpenStreetMap)集成,也可以与自己的百度地图API集成,以便于您自定义百度地图的外观和功能。 在Cesium中加载个性化百度地图的URL很简单,您只需遵循以下步骤: 1. 获取个性化百度地图的URL:打开百度地图网站(http://map.baidu.com/),选择自定义地图,然后调整地图的样式和功能。完成后,单击“保存”按钮,该地图页面上将显示您的个性化地图的URL。 2. 将URL复制到Cesium中:在Cesium的代码中添加以下代码片段,将个性化百度地图的URL添加到您的应用程序中: var viewer = new Cesium.Viewer('cesiumContainer'); viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url : '您的个性化百度地图URL', credit : 'Baidu' })); 3. 运行应用程序:保存并运行应用程序以查看您的个性化百度地图。现在,您可以在Cesium中加载完全符合您需要的百度地图了! 总之,Cesium和百度地图API的结合可以给您的WebGIS应用程序带来更为丰富的功能和更好的用户体验。 希望这个简单的步骤一步一步地带领大家成功加载个性百度地图。 ### 回答3: Cesium是一个开源的地球可视化引擎,可以加载不同的地图服务。想要加载个性化百度地图,只需要在Cesium中使用自定义的URL即可。 首先,在百度地图开放平台上申请一个地图API,并生成一个AK(Access Key),这个AK将作为加载地图的凭证。接下来,将AK加入个性化URL中,形成如下的URL: http://api.map.baidu.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20200516&scale=1&ak=YOUR_AK 其中,{x}、{y}和{z}分别表示地图的瓦片坐标和缩放级别,你可以根据需要调整它们的值。udt参数表示地图的更新时间,这里设置为20200516,也可以根据实际情况修改。scale参数表示地图的清晰度,这里设置为1表示标准清晰度。最后,将YOUR_AK替换为你的AK即可。 在Cesium中,使用以下代码加载地图: ``` var viewer = new Cesium.Viewer('cesiumContainer'); var baiduImageryProvider = new Cesium.UrlTemplateImageryProvider({ url: 'http://api.map.baidu.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20200516&scale=1&ak=YOUR_AK', credit: '' }); viewer.imageryLayers.addImageryProvider(baiduImageryProvider); ``` 这样就可以成功加载个性化百度地图了。如果需要修改地图样式,可以在百度地图开放平台的个性化地图样式编辑器中进行编辑,并在URL中加入相应参数,详细可参考百度地图开放平台的相关文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值