百度地图BMap和BMapGL的区别

1.引入的js的

        BMap引入版本是2.0  <script src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>

        BMapGL引入版本是1.0  <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

2.初始化地图

        <div id="map"></div>

        两者之间初始化时的主要区别是
       var map =  new BMap.Map("map")
       var map = new BMapGL.Map("map")

3.添加Marker

        BMap

        首先定义point(一个经纬度的坐标点)

        var Point = new BMap.Point(lng, lat)

        var myIcon = new BMap.Icon(img, new BMap.Size(34, 34))

        var marker = new BMap.Marker(Point, {

                icon: myIcon,

        })

        map.addOverlay(marker)

        BMapGL   

        把以上的BMap改成BMapGL 

4. 路况展示

     BMap

        打开路况

data(){
    return{
      //  *  路况实例
      traffic: '',
    }
}


this.traffic = new BMap.TrafficLayer() //  *  创建交通流量图层实例`
this.map.addTileLayer(this.traffic) //  *  将图层添加到地图上

        关闭路况

this.map.removeTileLayer(this.traffic)

   BMapGL

        打开路况

              

this.map.setTrafficOn()

        关闭路况

               

this.map.setTrafficOff()

  • 10
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以同时使用百度地图BMapGL版本和BMap版本,但是需要注意以下几点: 1. 引入的 JavaScript 文件不能重复,需要分别引入BMapGL和BMap的JavaScript文件。 2. 在使用BMapGL时,需要使用BMapGL.Map、BMapGL.Point等对象,而不是BMap的对象。 3. 在BMapGL和BMap之间切换时,需要注意地图容器的ID是否相同,如果不同需要先销毁之前的地图对象。 4. 由于BMapGL是基于WebGL技术实现的,所以相对于BMap会有更高的性能和更好的体验,但是不支持IE浏览器和低版本的Chrome等浏览器。 以下是一个使用BMapGL和BMap的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BMapGL和BMap同时使用示例</title> <style type="text/css"> #map { width: 800px; height: 600px; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/api_gl/v1.0/map.js"></script> <script type="text/javascript"> // 使用BMapGL创建地图 var mapGL = new BMapGL.Map("map"); mapGL.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); mapGL.addControl(new BMapGL.NavigationControl()); // 使用BMap创建覆盖物 var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); map.addOverlay(marker); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值