百度地图实用案例

简介: 百度地图实用案例

1、创建一个js文件


export function BMPGL(ak) {
    return new Promise(function (resolve, reject) {
        window.init = function () {
            // eslint-disable-next-line
            resolve(BMapGL)
        }
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`
        script.onerror = reject
        document.head.appendChild(script)
    })
}


2、在组件中使用


const init = () => {
    BMPGL('ak值').then(
      (BMapGL) => {
        let map = new BMapGL.Map('container')
        // 创建点坐标 axios => res 获取的初始化定位坐标
        let point = new BMapGL.Point(116.404, 39.915)
        // 初始化地图,设置中心点坐标和地图级别
         map.centerAndZoom(point, 15);
      }
    )
  }
相关文章
|
JavaScript 定位技术 PHP
【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图
|
定位技术 API 开发者
地图:nuxt3高德地图简单使用
地图:nuxt3高德地图简单使用
544 0
|
7月前
|
前端开发 定位技术 API
怎么用LarkMap完成地图需求
本文属于技术选型的参考性文章,主要以一个一个的案例分析,来带各位快速的了解到LarkMap能帮助我们完成哪些需求。希望阅读完之后您对LarkMap有一个大致的印象,若后续有地图需求的话,可以考虑使用LarkMap。
237 2
|
8月前
|
存储 JavaScript 小程序
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
173 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
334 0
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
106 0
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
472 0
|
定位技术
百度地图开发实战案例:展示当前定位多少千米内的POI(兴趣点)
百度地图开发实战案例:展示当前定位多少千米内的POI(兴趣点)
111 0
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
168 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图loca API 文字LabelsLayer效果
地图开发实战案例:高德地图loca API 文字LabelsLayer效果
291 0