uniapp h5集成百度地图

第一步：创建 map.html文件

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>百度地图</title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#mapPage {height: 100%;position: relative;}#container {height: 100%}.conter {width: 30%;height: 60px;line-height: 60px;/* 毛玻璃效果 */background: rgba(255, 255, 255, 0.20);box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);backdrop-filter: blur(4.5px);-webkit-backdrop-filter: blur(4.5px);border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.18);position: absolute;right: 6px;text-align: center;font-weight: bold;z-index: 1000;}.normal {top: 40px;color: #19be6b;}.warn {top: 110px;color: #ff9900;}.error {top: 180px;color: #fa3534;}</style></head><body><div id='mapPage'><div id='container'></div></div></body><!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 --><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><!-- uni 的 SDK --><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script><!-- 百度地图 --><script type="text/javascript"src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=xxxx"></script><!-- 引入jquery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">document.addEventListener('UniAppJSBridgeReady', function() {//取url中的参数值let arr = window.location.href.split('?')let data = decodeURIComponent(arr[1]);let lng = data.split('&')[0];let lat = data.split('&')[1];// --------------  配置百度地图  ------------------------------var map = new BMapGL.Map("container"); // 创建地图实例var point = new BMapGL.Point(lng, lat); // 创建点坐标 map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);// 添加标注点var marker = new BMapGL.Marker(point); // 创建标注   map.addOverlay(marker); // 将标注添加到地图中});</script>
</html>

第二步：创建map.vue文件并将map.html嵌入

<template><view class="alarmManagement"><!-- Map --><view class="map"><web-view :src="url"></web-view></view></view>
</template><script>
export default {data(){return{url:`/static/html/map.html?`,}},onLoad(option){this.url += encodeURIComponent(`${option.longitude}&${option.latitude}`)},
}
</script><style>
.map {width: 90%;height: 90%;
}
</style>

uniapp h5集成百度地图相关推荐

微信JS-SDK之地理位置的获取与在线导航，集成百度地图实现在线地图搜索
原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能 ...
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
android百度导航实现,Android 集成百度地图实现设备定位
Android 集成百度地图实现设备定位步骤1: 申请android 端SDK : http://lbsyun.baidu.com/ 步骤2: 下载基础版SDK 步骤3: 下载示例程序步骤4: 开 ...
我可以处理Flutter集成百度地图问题解决
一年多的Flutter开发经验,从Flutter发布开始自己集成百度地图API成为插件,到百度地图自己封装Flutter插件后引用,自己解决百度地图官方封装插件问题并提交记录到官方.我可以帮助解决百度 ...
Android 集成百度地图之申请TTS授权最新版
Android 集成百度地图之申请TTS授权最新版. 前提:登录百度地图开放平台,且已创建好应用. 开发文档-Android 导航SDK-TTS授权申请. 这里有个坑,简单说下,进入http://yu ...
Android 集成百度地图AR识别SDK（二）
废话今天我们开始集成百度地图AR识别SDK(后面简称AR SDK)的第二章,这一章我们主要讲Android Studio如何配置AR SDK 我们如果单单只看文档的话,很难看懂如何集成,我们需要结合 ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
AngularJS进阶十九在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

uniapp h5集成百度地图

uniapp h5集成百度地图相关推荐

最新文章

热门文章