要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的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. Volcano 社区 v1.7.0 版本正式发布 | 云原生批量计算

    摘要:北京时间2023年1月9日,Volcano社区v1.7.0版本正式发布. 本文分享自华为云社区<Volcano 社区 v1.7.0 版本正式发布 | 云原生批量计算>,作者:华为云云 ...

  2. VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

    VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...

  3. 上传图片文件并立即显示到页面使用 javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动

    首先,你要设计好鼠标事件处理方法,主要是鼠标左键点击,左键释放,还有鼠标移动方法其次,要了解容什么方式,画一个矩形,设计一个方法:DrawRectgle(左上角,右下角),并且要确定当调用这个方法时, ...

  4. 关于 Dev-C++ 中缺少 iconv.h 的问题

    前言 在 C++ 中有个扩展库 ext,里面有一些黑科技(hash, splay, binomial_heap 等等), 在 Windows 环境中,我们运行 Dev-C++ 并在头文件写 #incl ...

  5. 鸿蒙系统应用开发之基于API6的蓝牙开发

    写在前面 由题意得,我今天讲的是基于鸿蒙系统的兼容JS的类Web开发范式的软件应用开发之蓝牙开发,它是基于API6的,至于为什么是基于API6,请你花几分钟看一下我之前写的这个系列教程的第四篇&quo ...

  6. Sqoop导出ClickHouse数据到Hive

    背景 公司采购了外部服务,其存储为ClickHouse,按照公司要求需要将其数据采集到Hive. 验证环境 CDH: 6.3.2 ClickHouse: 19.15.4.10 Sqoop: 1.4.7 ...

  7. javaweb画图

    最近都在忙期中考试,写博客的频率有点低了,以下是一些基本代码,是王建民老师说的要建立自己的资料库,我直接建的资料库. 画图html <!--定义表格宽度 行距 宽度<tr>行< ...

  8. 接口自动化库-apist

    前言 目前很多公司用jmeter或者RF框架来实现接口自动化,确实是可以实现,但不利于CI/CD. 为了方便后续的可拓展性.可维护性.可复用性,项目leader在技术选型的时候应当以趋势.主流的为主, ...

  9. JZOJ 5372. 【NOIP2017提高A组模拟9.17】猫

    题目大意 对于 \(m = [1,\lfloor \frac n 2 \rfloor]\) 要求在一个序列中恰好选出 \(m\) 个不相邻的数使得权值和最大 其中 \(1\) 的左边是 \(n\),\ ...

  10. 代码随想录算法训练营day08 | leetcode 344.反转字符串/541. 反转字符串II / 剑指Offer05.替换空格/151.翻转字符串里的单词/剑指Offer58-II.左旋转字符串

    基础知识 // String -> char[] char[] string=s.toCharArray(); // char[] -> String String.valueOf(str ...