uniapp使用百度地图

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

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

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

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

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

在/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>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>


<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>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

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使用百度地图

最新文章

热门文章