要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的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. 迷宫机器人最短路径使用tkinter绘制

    起因 我想要写一个玩家和机器对战的迷宫游戏.这个项目我没有写完,我实现了最短机器人路径并绘制在tkinter上,以及玩家移动的功能.更多的关于GUI的设计太花时间了我没有写完. 算法介绍 我在写机器人 ...

  2. ajax 用 get方法 验证登录

    get-login-ajax.html --------------------------------------------- <body> <input type=" ...

  3. 今日实际操作----Dart Mac开发与运行环境配置 配置.bash_profile

    Mac 打开.编辑 .bash_profile 文件 一般在Mac上配置环境变量时经常要创建.编辑 .bash_profile文件.创建该文件时一般都会选择在当前用户目录下,即Mac下的.bash_p ...

  4. 手把手教大家写书写一个Mqtt网关

    摘要:物联网是现在比较热门的软件领域,众多物联网厂商都有自己的物联网平台,而物联网平台其中一个核心的模块就是Mqtt网关. 本文分享自华为云社区<一文带你掌握物联网mqtt网关搭建背后的技术原理 ...

  5. java跨域问题解决

    问题描述:在使用前后端分离的情况下,前端访问后端时会出现跨域问题 解决方式: 1.设置跨域 1).单个控制器方法CORS注解 在单个方法中加入注解@CrossOrigin. 2).整个控制器启用COR ...

  6. 【学习笔记】QT从入门到实战完整版（按钮和信号槽）（1）

    介绍说明 学习 QT 的目的只是为了可以实现跨平台的具有GUI 的程序,以前用的 MFC,但是无法应用在嵌入式平台.后来在全志的 Tina 系统中有看到 QT ,因此特地去了解了QT,挺有意思的,UI ...

  7. 让 MSYS2 Bash 像 Git Bash 一样显示 Git 分支名称

    Git for Windows 的 Bash 有一个很实用的功能,如果当前目录处于 Git 仓库中,那么命令行中会显示当前 Git 分支的名称(见下图). 然而原版的 MSYS2 Bash 没有这个功 ...

  8. Flink1.15仅支持ZooKeeper3.5/3.6

    这是一个验证贴,因为社区文档是错误的. 先说结论 Flink1.15仅支持ZooKeeper3.5/3.6,不再支持3.4.FLINK-25146 Drop support for Zookeeper ...

  9. 躬身入局,干货分享,2023年春招后端技术岗(Python)面试实战教程,Offer今始为君发

    早春二月,研发倍忙,杂花生树,群鸥竟飞.为什么?因为春季招聘,无论是应届生,还是职场老鸟,都在摩拳擦掌,秣马厉兵,准备在面试场上一较身手,既分高下,也决Offer,本次我们打响春招第一炮,躬身入局,让 ...

  10. LG P2839 [国家集训队]middle

    \(\text{Solution}\) 不考虑起点区间和终点区间的限制,求区间中位数 可以二分中位数,大于等于中位数的位置赋为 \(1\),小于的位置赋 \(-1\) 当区间和大于等于 \(0\) 时 ...