百度地图实用案例

简介: 百度地图实用案例

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
【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图
|
6月前
|
前端开发 定位技术 API
怎么用LarkMap完成地图需求
本文属于技术选型的参考性文章,主要以一个一个的案例分析,来带各位快速的了解到LarkMap能帮助我们完成哪些需求。希望阅读完之后您对LarkMap有一个大致的印象,若后续有地图需求的话,可以考虑使用LarkMap。
205 2
|
7月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
328 0
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
100 0
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
456 0
|
小程序 JavaScript 定位技术
微信小程序地图步骤
微信小程序地图步骤
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
586 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图loca API 文字LabelsLayer效果
地图开发实战案例:高德地图loca API 文字LabelsLayer效果
272 0
|
定位技术
百度地图开发实战案例:展示当前定位多少千米内的POI(兴趣点)
百度地图开发实战案例:展示当前定位多少千米内的POI(兴趣点)
103 0
|
Java 定位技术 API
autojs之高德地图定位 使用场景
autojs之高德地图定位 使用场景
560 1