在微信h5/浏览器上，使用百度地图定位，获取经纬度，再根据经纬度导航（高德/百度/腾讯）

<template>
	<div class="conter">
		<!-- <button @click="addbaidu">添加信息</button> -->
		<div id="map" class="map" style="" />
		<!-- {{form}} -->

		<view class="but_box">
			<view class="" style="margin-bottom: 20rpx;">
				<u-search @search="searchMap" @custom="searchMap" placeholder="输入要搜索的目的地" v-model="keyword"></u-search>
			</view>
			<view class="text">
				<!-- {{form.building}} -->
				<view class="" v-if="form.building">
					<view class="" style="font-weight: 600;margin-bottom: 6rpx;">
						{{form.building.split(",")[0]}}
					</view>
					<view class="">
						{{form.building.split(",")[1]}}
					</view>
				</view>
				<!-- <view class="" v-else style="color: #666;">
					选择位置
				</view> -->
			</view>
			<!-- {{form}} -->
			<view class="but_b" v-if="form.building">
				<!-- <u-button shape="circle" class="but_add" @click="no" text="导肮" color=""></u-button> -->
				<u-button type="success" plain shape="circle" class="but_add" @click="gogogo" text="导肮"
					color=""></u-button>
				<!-- color="#96C446" -->
				<u-button type="success" v-if="!state" shape="circle" class="but_add" @click="ok" text="确定"></u-button>
			</view>
		</view>
		<u-popup mode="bottom" :round="20" :show="selectMapShow" @close="closePop" @open="openPop">
			<view class="popup_con">
				<!-- <h1>选择</h1> -->
				<!--  ( 推荐 ) -->
				<u-button class="select_b" @click="goToApp('baidu')" text="百度地图" color=""></u-button>
				<u-button class="select_b" @click="goToApp('tencent')" text="腾讯地图" color=""></u-button>
				<u-button class="select_b" @click="goToApp('gaode')" text="高德地图" color=""></u-button>
				<u-button class="select_but" @click="selectMapShow = false" text="取消" color=""></u-button>

			</view>
		</u-popup>

	</div>
	<!-- <script type="text/javascript" src="//api.map.baidu.com/getscript?type=webgl&v=1.0&ak=你的密钥">
    </script> -->
</template>
<script type="text/javascript" src="//api.map.baidu.com/getscript?type=webgl&v=1.0&ak=你的密钥">
</script>

<script>
	// 引入第三方工具包
	export default {
		name: 'BaiDus',
		data() {
			return {
				local: null,
				keyword: '',
				myPlace: {
					longitude: "",
					latitude: "",
				},
				selectMapShow: false,
				// 地图实例
				map: null,
				// Marker实例
				mk: null,
				// 定时器
				initMapeq: null,
				// 表单开关
				dialogVisible: false,
				// 表单
				form: {
					latitude: '',
					longitude: '',
					building: ''
				},
				event: {},
				state: 0
			}
		},
		created() {},
		mounted() {
			// 页面加载完之后，加载百度地图
			// 加载引入BMapGL
			this.initMap()
			this.setNavigationBarTitle()
		},
		onLoad(event) {
			console.log('event');
			console.log(event);
			// this.event = event
			this.form.longitude = event.longitude
			this.form.latitude = event.latitude
			this.form.building = event.building
			this.state = event.state
		},
		methods: {
			searchMap() {
				console.log('keyword');
				console.log(this.keyword);
				this.local.search(this.keyword);
			},
			// 百度转腾讯或高德
			BaiduMapTransTxMap(lng, lat) {
				let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
				let x = lng - 0.0065;
				let y = lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta);
				let lats = z * Math.sin(theta);
				return {
					longitudeTr: lngs,
					latitudeTr: lats
				};
			},
			openPop() {},
			goToApp(type) {
				const longitude = this.form.longitude // 百度的经纬度
				const latitude = this.form.latitude // 百度的经纬度
				const {
					longitudeTr,
					latitudeTr
				} = this.BaiduMapTransTxMap(longitude, latitude)
				// console.log('经纬度');
				// console.log(longitude, latitude);
				// console.log('转换后的');
				// console.log(longitudeTr, latitudeTr);
				// return
				const myLongitude = this.myPlace.longitude
				const myLatitude = this.myPlace.latitude
				const placeOne = this.form.building.split(",")[0]
				const placeTwo = this.form.building.split(",")[1]
				let url = '';
				const gaodeUrl =
					`https://uri.amap.com/marker?position=${longitudeTr},${latitudeTr}&name=${ placeTwo || placeOne}`;
				const baiduUrl =
					`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${placeTwo || placeOne}&content=${placeOne}&output=html&src=webapp.baidu.openAPIdemo`;
				const tencentUrl =
					// `https://apis.map.qq.com/uri/v1/routeplan?type=bus&from=&fromcoord=39.980683,116.302&to=${placeTwo || placeOne}&tocoord=${latitude},${longitude}&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77`;
					`https://apis.map.qq.com/uri/v1/routeplan?type=bus&from我的位置=&fromcoord=${myLatitude},${myLongitude}&to=${placeTwo || placeOne}&tocoord=${latitudeTr},${longitudeTr}&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77`;

				// 根据选择的地图类型设置URL
				if (type === 'gaode') {
					url = gaodeUrl;
				} else if (type === 'baidu') {
					url = baiduUrl;
				} else if (type === 'tencent') {
					url = tencentUrl;
				}

				// 打开链接
				if (url) {
					window.open(url, '_blank');
					this.selectMapShow = false
				} else {
					console.error('地图类型错误');
				}
			},
			gogogo() {
				this.selectMapShow = true
			},
			setNavigationBarTitle() {
				uni.setNavigationBarTitle({
					title: '地图' // 设置导航栏的标题
				});
				document.title = '城乡环境建设';
			},
			on() {
				uni.navigateBack();
			},
			ok() {
				if (this.state != 1) {
					// 触发自定义事件，并返回上一页
					console.log('111');
					console.log(this.state);
					uni.$emit('refreshPreviousPage', this.form);
				}
				//返回上一页
				uni.navigateBack();

			},
			close() {
				// this.form = {};
			},
			// 添加开关
			addbaidu() {
				// debugger
				// 打开表单
				// this.dialogVisible = true
				// 加载地图
				this.getbaidu()
				// this.initMap();
			},
			// 加载地图方法
			getbaidu() {
				this.showDialog = true
				this.initMapeq = setInterval(() => {
					if (this.initMap()) {
						clearInterval(this.initMapeq)
					}
				})
			},
			// 百度地图封装方法
			// 初始化地图
			initMap() {
				//  var map = new BMapGLGL.Map('map');
				// map.centerAndZoom(new BMapGLGL.Point(116.331398,39.897445), 13);
				try {
					// console.log(123)
					var that = this
					// 1、挂载地图
					// 创建地图实例
					this.map = new BMapGL.Map('map')
					var geolocation = new BMapGL.Geolocation()

					// 开启SDK辅助定位
					geolocation.enableSDKLocation()
					geolocation.getCurrentPosition(function(res) {
						console.log('辅助定位')
						console.log(res)
						if (res) {
							that.myPlace.longitude = res.point.lng
							that.myPlace.latitude = res.point.lat
							if (that.form.longitude) return
							that.form.longitude = res.point.lng
							that.form.latitude = res.point.lat
							that.map.centerAndZoom(res.point, 14)
							that.getAddrByPoint(res.point)
							console.log(that.form)
						}
					})
					// 设置中心经纬度  这里我们使用BMapGLGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标） 作者：星银色飞行船
					console.log(this.form)
					var point = new BMapGL.Point(
						this.form.longitude || 116.41338729034514,
						this.form.latitude || 39.910923647957596
					)
					// 3.在创建地图实例后，我们需要对其进行初始化，BMapGLGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
					this.map.centerAndZoom(point, 14)
					// 滚轮缩放
					this.map.enableScrollWheelZoom()
					// // 3、设置图像标注并绑定拖拽标注结束后事件
					this.mk = new BMapGL.Marker(point, {
						enableDragging: true
					})
					this.map.addOverlay(this.mk)
					this.local = new window.BMapGL.LocalSearch(this.map, {
						renderOptions: {
							map: this.map
						}
					})
				} catch (err) {
					return false
				}
				// 4、添加（右上角）平移缩放控件
				// this.map.addControl(
				//   new BMapGL.NavigationControl({
				//     anchor: BMapGL_ANCHOR_TOP_RIGHT,
				//     type: BMapGL_NAVIGATION_CONTROL_SMALL
				//   })
				// )
				// 7、绑定点击地图任意点事件
				var that = this
				this.map.addEventListener('click', function(e) {
					// console.log('e');
					// console.log(e);
					// that.form.longitude = e.latlng.lng;
					// that.form.latitude = e.latlng.lat;
					// var geoc = new BMapGL.Geocoder();
					// var pt = e.latlng;
					// that.mk.setPosition(e.latlng);
					// geoc.getLocation(pt, function (rs) {
					//   var addComp = rs.addressComponents;
					//   console.log("点击了", addComp);
					//   that.form.building =
					//     addComp.city +
					//     addComp.district +
					//     addComp.street +
					//     addComp.streetNumber;
					//   console.log(that.form);
					// });
					that.getAddrByPoint(e.latlng)
				})
				return true
			},
			// 2、逆地址解析函数 根据坐标点获取详细地址  point   百度地图坐标点，必传
			getAddrByPoint(point) {
				var that = this
				var geco = new BMapGL.Geocoder()
				geco.getLocation(point, function(res) {
					console.log('res')
					console.log(res)
					// that.mk.setPosition(point);
					// that.map.panTo(point);
					that.mk.setPosition(res.point)
					that.form.building = res.address + res.content.poi_desc
					that.form.longitude = res.point.lng
					that.form.latitude = res.point.lat
				})
			},
			// 8-1、地址搜索
			blur() {
				// 根据状态码
				// console.log(this.map);
				// var options = {
				//   onSearchComplete: function (res) {
				//     var s = [];
				//     if (local.getStatus() == "BMapGL_STATUS_SUCCESS") {
				//       for (var i = 0; i < res.getCurrentNumPois(); i++) {
				//         s.push(res.getPoi(i));
				//       }
				//       cb(s);
				//     } else {
				//       cb(s);
				//     }
				//   },
				// };
				// var local = new BMapGL.LocalSearch(this.map, options);
				// console.log(local)
				// local.search(str);
				// cb(this.keyword)

				this.local.search(this.form.building)
			},
			// 8-2、选择地址
			handleSelect(item) {
				this.form.building = item.address + item.title
				console.log(item)
				this.form.longitude = item.point.lng
				this.form.latitude = item.point.lat
				console.log('lng', item.point.lng)
				console.log('lat', item.point.lat)
				this.map.clearOverlays()
				this.mk = new BMapGL.Marker(item.point)
				this.map.addOverlay(this.mk)
				this.map.panTo(item.point)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.conter {
		position: relative;
		height: calc(100vh - 80rpx)
	}

	.but_box {
		padding: 22px 16px 16px 16px;
		border-top-left-radius: 20px;
		/* 左上角圆角 */
		border-top-right-radius: 20px;
		/* 右上角圆角 */
		background-color: #fff;
		width: 100%;
		// height: 150rpx;
		position: absolute;
		z-index: 9999;
		bottom: 0px;

		.text {
			// min-height: 50px;
			margin-bottom: 10rpx;
		}

		.but_b {
			display: flex;
			justify-content: end;

			.but_add {
				margin: 0 6PX;
				// margin-top: 30rpx;
				width: 180rpx;
				height: 68rpx;
				font-size: 36rpx;
			}
		}
	}

	.map {
		width: 100%;
		height: calc(100vh - 88rpx)
	}

	.popup_con {
		height: 420rpx;
		width: 100%;
		// margin-top: 20px;
	}

	.select_b {}



	::v-deep .select_b {
		height: 100rpx;
		border: none;
		background-color: rgba(255, 255, 255, 0);
		border-bottom: 1rpx solid #eee;
		/* 底部边框为2px的黑色实线 */
	}

	::v-deep .select_but {
		height: 100rpx;
		border: none;
		background-color: rgba(255, 255, 255, 0);
		border-top: 10rpx solid #fafafa;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}
</style>