uniapp H5端 使用百度地图API

由于uniappH5端自带的腾讯地图点击不返回坐标，也获取不到具体位置，由于项目的需求和uniapp自带的组件不符合，于是使用了百度地图

文章目录

• 前言
• 一、实现效果额
• 二、使用步骤
  • 1.引入
  • 2.具体实现
• 总结

---

前言

        由于uniappH5端自带的腾讯地图点击不返回坐标，也获取不到具体位置，由于项目的需求和uniapp自带的组件不符合，于是使用了百度地图

---

一、实现效果

点击地图返回坐标以及地址回显到页面中

二、使用步骤

1.引入库（见此链接）

在vue中使用vue-baidu-map实现地址定位标点及关键字搜索定位（获取地址数据并获取经纬度） - pwindy - 博客园

2.实现代码如下

template部分：

			<view class="page-body">
				<view class="page-section page-section-gap">
					<baidu-map :scroll-wheel-zoom="true" :center="point" :zoom="zoom" @ready="mapReady" class="bm-view">
						<bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view>
						<!-- 自定义控件 -->
						<bm-control :offset="{width: '50px', height: '10px'}">
							<!-- 自动填充 -->
							<bm-auto-complete :sugStyle="{zIndex: 999999}">
								<uni-card>

									<input v-model="searchKey" placeholder="输入关键字进行模糊查询" @input="mapSearch">
									</input>
								</uni-card>
								<!-- <button @click="mapSearch">搜索</button> -->
							</bm-auto-complete>
							<uni-card>

								<input v-model="inputRadius" placeholder="请输入搜索半径(默认10)" @change="confirmRange">
								</input>
							</uni-card>
						</bm-control>
						<bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT">
							<uni-card>
								<view class="" style="text-align: center;font-size: 14px;">
									<span>{{address}}</span>

								</view>
								<view class="" style="text-align: center;font-size: 16px;font-weight: 600;">
									<span>{{riskLevel}}</span>
								</view>
								<button type="primary" size="small" @click="confirm">确认接入点</button>
							</uni-card>
						</bm-control>

						<!-- 手动放大缩小到省市街道 位置：右下方-->
						<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
					</baidu-map>
				</view>
			</view>

tips：如果像我一样使用bm-auto-complete来写自动填充框框的同学，记得里头一定要用input标签别用其他框架的input标签，不然会出问题！

js部分：

mapSearch() {
				//创建圆
				var colour = "blue";
				// 给予不同风险等级对应的颜色

				//创建地址解析器实例
				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上，并调整地图视野
				myGeo.getPoint(this.searchKey, (point) => {
					if (point) {
						this.map.clearOverlays() // 清空地图上的覆盖物
						this.map.centerAndZoom(point, 15)
						this.map.addOverlay(new BMap.Marker(point)) //重新绘制当前位置覆盖物-marker点
						this.map.addOverlay(new BMap.Circle(point, parseInt(this.radius * 100), {

							strokeColor: colour,
							strokeWeight: 1,
							strokeOpacity: 1,
							fillOpacity: 0.33,
							fillColor: colour
						}))
						myGeo.getLocation(point, (rs) => {
							console.log('当前位置详细信息---', rs)
							this.address = rs.address
						})
						this.point = point

					} else {
						// alert('您选择的地址没有解析到结果！');

					}
				}, this.searchKey)

			},

mapReady({
				BMap,
				map
			}) {
				this.BMap = BMap;
				this.map = map;

				geocoder = new BMap.Geocoder(); //创建地址解析器的实例
				if (this.model.hasOwnProperty('address')) { //如果当前model中包含address 则证明是修改弹框里面的地址数据（地址存在，打开弹框显示地址标点）
					this.keyword = this.model.address
					this.inputValue = this.model.address
				} else { //否则显示默认标点（这里的经纬度代表成都）
					//第二个参数  10 代表地图缩 放级别,最大为19,最小为0

					setTimeout(() => {
						this.map.centerAndZoom(this.point, 15);
						//增加标记
						addMarker(this.point, 0);
						//增加圆形遮罩
						addCircle(this.point, parseInt(that.radius * 100));
					}, 1000);
					this.keyword = ''
					this.inputValue = ''
				}

				map.enableScrollWheelZoom(true);
				let that = this;
				map.addEventListener('click', function(e) {
					that.point = e.point;
					that.riskLevel = ""
					addOverLay(0);
				});

				function addOverLay(val) {
					// $("#risk-level").html("");
					//清除覆盖物
					map.clearOverlays();
					//增加标记
					addMarker(that.point, val);
					//增加圆形遮罩
					addCircle(that.point, parseInt(that.radius * 100));
				}

				// 添加标注
				function addMarker(point, val) {
					let marker = new BMap.Marker(point);
					map.addOverlay(marker);
					var myGeo = new BMap.Geocoder({
						extensions_town: true
					});
					if (val == 0) {
						myGeo.getLocation(point, function(result) {
							if (result) {
								console.log(result);
								that.center = result.point
								that.address = result.address
								// console.log(result);
								// document.getElementById('address').innerHTML = result.address;
							}
						});
					}
					// console.log(marker);
					return marker;
				}
				//画圆
				function addCircle(point, radius) {
					var colour = "blue";
					// 给予不同风险等级对应的颜色
					switch (that.riskLevel) {
						case "中等": {
							colour = "#d3b613";
							break;
						}
						case "严重": {
							colour = "red";
							break;
						}
						default: {
							colour = "blue";
							break;
						}
					}
					// console.log(colour);
					// console.log(riskLevel);
					// 修改输出文本的颜色
					// $("#risk-level").css("color", colour);
					let circle = new BMap.Circle(point, radius, {
						strokeColor: colour,
						strokeWeight: 1,
						strokeOpacity: 1,
						fillOpacity: 0.33,
						fillColor: colour
					}); //创建圆
					map.addOverlay(circle);
				}

			},

那个圆圈实际上没什么用，可以不加

---

总结

这是一个十分小白的使用记录，希望能给大家帮助，谢谢。