uniapp使用百度地图（一）

鲤鱼的日常生活

已于 2022-12-27 10:37:18 修改

阅读量7.1k

点赞数 9

文章标签： uni-app

于 2022-12-06 10:41:15 首次发布

本文链接：https://blog.csdn.net/liyu_ya/article/details/128196905

版权

之前的uniapp使用百度地图可能存在一些问题，然后我就被各种问候了一下，其实上篇文章开头已说明了，我是在web使用的。好吧，都是我的错，这几天有空了，我就仔细研究了一下，应该有很多方式来实现，所以我打算出好几期，来完成各个不同的使用方式来使用百度技术，希望不会再被问候。

一、如何使用以及应用

秘钥我要跳过了，就不一一说明了，没百度秘钥的先去搞一个

在这里我们要使用 web-viwe组件来完成

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

具体想了解 web-view技术可以去搜索一下，详细了解

(1-1) 首先我们先准备一个容器组件

map.vue

<template>
	<view >
		<!-- Map -->
		<view class="map">
			<web-view src="/static/html/map.html"></web-view>
		</view>
	</view>
</template>

(1-2) 然后我们再static/html 文件下建立一个html页面

地图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%
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></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>



	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------

			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		});
	</script>
</html>

接下来手机端就会展示出如下图，百度地图一个简单的展示就出来了

二、实际应用

(2-1) 加标注点，以及一段经纬度上去

<!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%
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></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>



	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------

			var map = new BMapGL.Map("container"); // 创建地图实例
			let point = new BMapGL.Point(108.953364, 34.276184); // 创建点坐标 
			map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			let marker = new BMapGL.Marker(point); // 创建标注   
			map.addOverlay(marker);
			let myIcon = new BMapGL.Icon("./logo.png", new BMapGL.Size(42, 42), {
				// 设置图片偏移。  
				// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
				// 需要指定大图的偏移位置，此做法与css sprites技术类似。   
				imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移   
			});
			// // 创建标注对象并添加到地图  
			let marker1 = new BMapGL.Marker(point, {
				icon: myIcon
			})
			let polyline = new BMapGL.Polyline([
				new BMapGL.Point(108.921366, 34.190371),
				new BMapGL.Point(108.930031, 34.24932),
				new BMapGL.Point(108.932879, 34.249476)
			], {
				strokeColor: "blue",
				strokeWeight: 4,
				strokeOpacity: 0.5
			});
			map.addOverlay(polyline);
			const labelEnd = new BMapGL.Label('终点', { //设置起点文字内容
				position: new BMapGL.Point(108.932879, 34.249476),
				offset: new BMapGL.Size(0, 0),
			});
			labelEnd.setStyle({ //设置起点文字样式
				color: "#fff",
				backgroundColor: "#396DFF",
				borderRadius: "10px",
				padding: "2px 6px",
				border: "0",
			});
			map.addOverlay(labelEnd); // 添加覆盖物


			const label = new BMapGL.Label('起点', {
				position: new BMapGL.Point(108.921366, 34.190371),
				offset: new BMapGL.Size(0, 0),
			});
			label.setStyle({
				color: "#fff",
				backgroundColor: "#396DFF",
				borderRadius: "10px",
				padding: "2px 6px",
				border: "0",
			});
			map.addOverlay(label);

			label.addEventListener("click", function(e) { //点击触发
				console.log("点击了");
				let opts = {
					width: 250, // 信息窗口宽度
					height: 100, // 信息窗口高度
					title: "定制版" // 信息窗口标题
				}
				let infoWindow = new BMapGL.InfoWindow("你好鸭，我在起点", opts); // 创建信息窗口对象
				map.openInfoWindow(infoWindow, e.target.latLng);
			});
		});
	</script>
</html>

实际效果图

在点击起点时

（2-2）获取经纬度

客户端定位

		let geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					console.log(JSON.stringify(mk));
					map.addOverlay(mk);
					map.panTo(r.point);
					alert('您的位置：' + r.point.lng + ',' + r.point.lat);
				} else {
					alert('failed' + this.getStatus());
				}
			});

实际效果图（涉及到隐私，经纬度我i处理了一下）

IP定位

	function myFun(result) {
				var cityName = result.name;
				map.setCenter(cityName);
				alert("当前定位城市:" + cityName);
			}
			var myCity = new BMapGL.LocalCity();
			myCity.get(myFun)

定位SDK辅助定位

	var geolocation = new BMapGL.Geolocation();
			// 开启SDK辅助定位
			geolocation.enableSDKLocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					alert('您的位置：' + r.point.lng + ',' + r.point.lat);
				} else {
					alert('failed' + this.getStatus());
				}
			});

实际效果图