当前位置：首页 > news >正文

uniapp开发 H5端使用百度地图

news 2025/5/29 7:25:36

注册登录百度地图开放平台

登录百度地图开放平台 https://lbsyun.baidu.com/（没有账号则先去创建一个百度账号）
在这里插入图片描述

获取百度地图AK

1、进入百度地图开放平台控制台（导航栏“控制台”），点击“应用管理”-“我的应用”
在这里插入图片描述
2、选择“创建应用”，应用模块选择“浏览器端”。创建成功后你就得到一个百度地图AK。

项目上开始使用

1、在uni项目根目录创建temp.h5.html，粘贴一下代码注意AK注意AK注意AK

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title><%= htmlWebpackPlugin.options.title %></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><!-- 百度地图-工具函数 --><script src="//api.map.baidu.com/api?v=3.0&ak=填写您的AK"></script><!-- 百度地图-gl (显示地图必须有) --><script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=填写您的AK"></script></body>
</html>

2、然后点击uni项目根目录manifest.json，如下图引入模版
在这里插入图片描述
注：地图已经引入，此时需重启动项目。
3、测试地图使用
在uni项目根目录的App.vue页面中，在onLaunch()钩子函数里，添加console.log(BMap)

console.log(BMap)

地图页详细代码

<template><!-- 地图容器 --><view id="container"></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {// 加载地图(必须定时器延迟一会,不小于500毫秒即可,稳妥点设置1000)// 执行到这的时候,temp.h5.html还没有插入百度地图的<script>,不延迟会报错setTimeout(() => {this.initMap()}, 500)},mounted() {},methods: {initMap() {const map = new BMapGL.Map("container"); // 创建Map实例const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}}}
</script><style>#container {width: 100%;height: 500px;}
</style>

最后样式如下
在这里插入图片描述
个人项目实际验证代码，具体需求需在次代码基础上优化，个人记录使用，如对您有所帮助不胜荣幸。