要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的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. 分布式拒绝服务攻击(DDoS)和僵尸网络(Botnet)

    DDos和僵尸网络是相辅相成的两种攻击手段,本文仅介绍基本概念,详细请查看文末参考资料. 分布式拒绝服务攻击(DDoS) 分布式拒绝服务攻击DDoS是一种基于DoS的特殊形式的拒绝服务攻击,是一种分布 ...

  2. absolute定位后居中的方法

    要求 : 子级需要加动画上下动起来,并且需要在全屏居中 html代码如下: <div class="row m-0 w-100 mybanner"> <!-- 左 ...

  3. 练习:集合元素处理(传统方式)-练习:集合元素处理(Stream方式)

    练习:集合元素处理(传统方式) 题目 现在有两个ArrayList集合存储队伍当中的多个成员姓名,要求使用传统的for循环(或增强for循环依次进行以下若干操作步骤︰ 1.第一个队伍只要名字为3个字的 ...

  4. 单细胞转录组实战01: CellRanger7定量

    安装CellRanger cd ~/APP wget -O cellranger-7.1.0.tar.xz "https://cf.10xgenomics.com/releases/cell ...

  5. Grafana 系列文章（十一）：Loki 中的标签如何使日志查询更快更方便

    ️URL: https://grafana.com/blog/2020/04/21/how-labels-in-loki-can-make-log-queries-faster-and-easier/ ...

  6. GDOI 2021 PJ 总结

    Day 0.5 在门口等了好久,终于进去了. Day 1 下午来到考场,发现自己承诺书没有拿,然后就跑到宿舍去拿,回来发现只要身份证. T1一眼是个博弈,发现不太好打,先跳. T2发现最多消耗4320 ...

  7. ARM启动顺序

    iROM(也叫BL0)的作用:   初始化系统时钟,设置看门狗,初始化栈和堆   加载BL1 BL1的作用:   初始化RAM , 关闭Cache , 设置栈   加载BL2 BL2的作用:   初始 ...

  8. 面向对象程序设计（三）：new&deleet什么是动态内存

    <C++ primer>中提到:在C++中,动态内存的管理是通过一对运算符来完成的: new 在内存池中为对象分配一块空间,并指向这个对象的指针,我们可以在这里对对象进行初始化: dele ...

  9. mysql14 sql优化-索引失效

    1.索引失效 先创建符合索引,三个字段 ALTER table abilityassessrecord add INDEX idx_customerno_roomno_abilityassessrec ...

  10. docker05-dockerfile

    1.dockerfile是什么 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本.可以理解为docker自己的语言编写的脚本. 2.Dockerfile内容基础 ...