uniapp中引入百度地图并实现关键字自动补全

1、首先你需要去百度地图官m网去申请密钥 这个过程呢~也是比较简单的，网上教程很多 我就不多解释了 请自行上百度获取

2、创建一个公共方法

创建一个名为map.js的文件，目录为page/common/map.js ; 当然你也可以自定义文件名为与目录

代码如下：

export function mymap(ak) { // 此处ak 是你百度地图获取的密钥
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(mymap)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

3、在你需要使用到百度地图的vue文件中引入此方法

使用 import 引入文件 复制项目中注意 文件路劲是否正确

import { mymap } from '../../common/map.js'

4、先这样 然后这样 在那样 你懂的撒~

5、完整代码如下 ：

page/common/map.js 代码:

export function mymap(ak) { // 此处ak 是你百度地图获取的密钥
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(mymap)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

代码中使用 uview 框架 u-input 、 u-button 可自行替换为input 、button
将 密钥 复制 到 this.ak 即可使用
map.vue 代码:

<template>
	<view class="app">
		<view class="allmap-container" v-show="show">
			<view @click="allmap.onClick" :prop="allmap.markerList" :change:prop="allmap.updateEcharts" id="allmap"></view>
			<view class="posiTop">
				<view class="dis">
					<view class="input">
						<u-input ref='suggestInput' id="suggestId" placeholder='输入关键字搜索' height='58' type="text" :border="true" />
					</view>
					<view class="button">
						<u-button type="primary" shape="square" size="mini" @click='allmap.handleQue'>确认</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script module="allmap" lang="renderjs"> 
	// module="allmap" lang="renderjs" 很重要不可去掉
	import { mymap } from '../../common/map.js' // 引入方法
	export default {
		data() {
			return {
				markerList:[],
				city: '长沙',
				map: null,
				ak: ' ',  // 百度密钥申请方法网上很多自行百度
				show: false,
				lng: '', // 当前位置
				lat: '', // 当前位置
				localSearch:null
			}
		},
		mounted() {
			// 百度地图API功能
			// 动态引入较大类库避免影响页面展示
			this.$nextTick(() => {
				let _this = this;
				 // 如需要弹窗授权，请写在此处
				mymap(_this.ak).then((mymap) => {
					// 创建地图实例
					var map = new BMap.Map( "allmap" );
					// 关键字输入提示  用户选择地址后 只能获取详细位置 不能获取经纬度 所以我们需要把详细地址转经纬度
					// this.$refs.suggestInput.$el.querySelector('input') 很重要
					// suggestInput 是input标签中属性 ref的值
					let ac = new BMap.Autocomplete({
						"input": this.$refs.suggestInput.$el.querySelector('input'),
						"location": map
					})
					var localSearch = new BMap.LocalSearch(map);
					/**
					 * 获取当前位置
					 * 当前方法可以准确获取用户位置 经纬度信息
					 */
					var geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition(function (r) {
						if (this.getStatus() == BMAP_STATUS_SUCCESS) {
							_this.lng = r.point.lng // 经纬度
							_this.lat = r.point.lat
							getAddress(r.point.lng, r.point.lat);// 通过经纬度获取详细地址信息
							let point = new BMap.Point(r.point.lng, r.point.lat) 
							map.centerAndZoom(point, 16); //设置缩放级别
							map.addOverlay(new BMap.Marker(point)); //添加标注
							map.enableScrollWheelZoom(true); // 允许缩放地图
						}else {
							// alert('failed' + this.getStatus());
						}
					},)
					this.map = map
					this.show = true // 等地图加载好后显示地图
					//鼠标点击下拉列表后的事件
					var myValue;
					ac.addEventListener("onconfirm", function(e) {   
						var _value = e.item.value;
						myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
						setPlace(); // 移动到选中位置
						searchByStationName(myValue) // 获取经纬度
					});
					// 点击列表 移动到选中的位置
					function setPlace(){
						map.clearOverlays();    //清除地图上所有覆盖物
						function myFun(){
							var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
							map.centerAndZoom(pp, 20); // 放大
							map.addOverlay(new BMap.Marker(pp));    //添加标注
						}
						var local = new BMap.LocalSearch(map, { //智能搜索
						  onSearchComplete: myFun
						});
						local.search(myValue);
					}
					// 根据地址信息获取经纬度
					function searchByStationName(keyword) {
					　　localSearch.setSearchCompleteCallback(function (res) {
					　　　　var poi = res.getPoi(0);
					　　　　map.centerAndZoom(poi.point,16);
						   getAddress(poi.point.lng,poi.point.lat,keyword); // 通过经纬度 重新获取详细地址
					　　});
					　　localSearch.search(keyword);
					}
					// 根据坐标得到地址描述    
					function getAddress(lng, lat) {
						var myGeo = new BMap.Geocoder();
						// 根据坐标得到地址描述    
						myGeo.getLocation(new BMap.Point(lng, lat), function (result) {
							if (result) {
								console.log('result',result)
							} 
						});
					}
				});
			});
		},
		methods: {
			// 确认按钮
			handleQue(){
				console.log('确认')
			}
		}
	}

</script>
<style lang="scss">
	#allmap{
		height: 100vh;
		width: 100%;
	}
	.u-input--border{
		padding: 0 0 0 10px !important;
	}
	.posiTop{
		position: fixed;
		width: 100%;
		top: 0;
		.dis{
			line-height: 60rpx;
			padding: 10px 10px;
			// background-color: red;
			background-color: rgba(255,255,255,0.97);
			display: flex;
			justify-content: space-between;
			.image{
				height: 20px;
				width: 20px;
				image{
					height: 100%;
					width: 100%;
				}
			}
			.input{
				width: 85%;
			}
			.button{
				// width: 15%;
			}
		}
	}
	
</style>

效果展示：

注意事项：[^1]

1.会出现部分安卓手机无法弹出允许手机获取定位权限的弹窗，需要主动在手机设置中和浏览器打开定位权限。 h5 谷歌浏览器定位不准确，请以真机为准 ios无bug
2. 如果需要 可以手动添加一个授权在进入页面时执行 让用户允许获取位置即可
3. 如果有代码不懂的地方欢迎留言评论
4. 暂不支持打包app端,