要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的API文件，参考使用文档即可开发使用。而在uniapp中是没法直接引入百度地图API文件的，我们要结合uniapp中的web-view组件来使用。

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次iframe内嵌的其他url。

经过我多次实验web-view要引入的.HTML文件放到hybrid/html目录下面一直存在问题，然而放到static目录下面是正常的。

在用到地图的页面，通过web-view组件引入开发百度地图的静态页面

<template>
<view class="alarmManagement">
<!-- Map -->
<view class="map" :style="[{height: winHeight + 'px'}]">
<web-view src="/static/html/map.html"></web-view>
</view>
</view>
</template>

在/static/html/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 class='normal conter'>正常：90</div>
<div class='warn conter'>报警：90</div>
<div class='error conter'>故障：90</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=您的密钥"></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() {
$('.normal').click(function(){
goDetailPage('normal');
})

$('.warn').click(function(){
goDetailPage('warn');
})

$('.error').click(function(){
goDetailPage('error');
})

// 跳转到列表详情页面
function goDetailPage(type){
uni.navigateTo({
url: `/pages/alarmListDetail/alarmListDetail?type=${type}`
})
}

// ------------------------------------ 配置百度地图 --------------------------------------------------------------------------------

var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(113.567845, 34.824952); // 创建点坐标
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); // 将标注添加到地图中
// 监听标注事件
marker.addEventListener("click", function() {
console.log("您点击了标注");
// 跳转到厂区地图页面
uni.navigateTo({
url: '/pages/factoryMap/factoryMap'
})
});

// 向地图中添加文本标注
var content = "国家863软件园";
var label = new BMapGL.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
})
// map.addOverlay(label); // 将标注添加到地图中
// label.setStyle({ // 设置label的样式
// color: '#000',
// fontSize: '30px',
// border: '2px solid #1E90FF'
// })
// 监听标注事件
label.addEventListener("click", function() {
alert("您点击了标注");
});
});
</script>
</html>

uniapp使用百度地图的更多相关文章

  1. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值

    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...

  2. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  3. Android 调用百度地图API

    一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...

  4. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  5. 【月入41万】Mono For Android中使用百度地图SDK

    借助于Mono For Android技术,.Net开发者也可以使用自己熟悉的C#语言以及.Net来开发Android应用.由于Mono For Android把Android SDK中绝大部分类库都 ...

  6. Xamarin.Android之使用百度地图起始篇

    一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的支持方面也有着非常的好支持,今天我们将会以百度地图类 ...

  7. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  8. 最全面的百度地图JavaScript离线版开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...

  9. 微信JS-SDK坐标位置转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...

  10. 百度地图demo

    以下代码拷贝成html,直接运行即能看到百度地图 <!DOCTYPE html><html> <head> <meta http-equiv="Co ...

随机推荐

  1. 从0开始学Java 第一期 开发前的准备

    Java 学习(一) - 开发前的准备 前言 由于一些项目上的需要,我得学习一下 Java 这门语言(主要是想写Android),本人并非0基础,至少在上个学期学习了一门必修的程序设计(C语言),所以 ...

  2. ng-alain组件st表格，实现点击表格行变色，或者渲染变色

    实现点击表格行变色 html文件 <st #st [data]="data" (change)="changeClick($event)" [column ...

  3. 不止ChatGPT，谷歌云 AI 方案早已厉兵秣马！

    近日 ChatGPT 爆火,掀起热议,能聊天能写代码,还能写策划稿,AI 似乎已逐渐变得无所不能. 不过在 AI 对话上,谷歌早在17年就提出了 Dialogflow 这一AI对话平台.相比起 Cha ...

  4. BUG日记---SSM进行多表查询错误-----页面使用<c:foreach>错误

    javax.servlet.ServletException: javax.servlet.jsp.JspTagException: Don't know how to iterate over su ...

  5. win32com操作word API精讲 第十集 Paragraphs & Paragraph接口 （一）

    本课程<win32com操作word API精讲&项目实战>以视频为主,文字为辅,公众号ID:一灯编程 在word编程中,Range和Paragraph(s)接口无愧于劳模接口的称 ...

  6. vue学习笔记（七）---- vue中的路由

    一.什么是路由 对于普通的网站来说,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 对应单页面的应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,h ...

  7. Android IO 框架 Okio 的实现原理，到底哪里 OK？

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 今天,我们来讨论一个 Square 开源的 I/O 框架 Okio,我们最开始接触 ...

  8. ASP.NET Core 系列总结

    <ASP.NET Core> 系列文章基于 .NET 3.1 和 .NET 6,主要是系统总结自己日常工作和学习中的知识点,之前是自己在 OneNote 上自己写,作为学习.总结笔记,逐渐 ...

  9. 记录一次vue部署docker步骤

    vue部署docker 拉取nginx镜像 docker pull nginx 有Dockerfile文件步骤: 1.打包vue npm run build 2.写一个default.conf 文件, ...

  10. osx安装mpd和ncmpcpp

    简介 mdp 是一款开源的音乐播放软件, 全名为 media player daemon , 从字面意思理解, 就是一个后台播放进程. 不同于传统的音乐播放软件集成了播放解码和界面, mpd 只是一个 ...