Vue:加入百度地图经纬度选取。（Ant design pro vue）

需求描述：

1.使用百度地图选取地理经纬度位置，结合mongodb 2d索引检索距离。

2.可手动输入经纬度地址，和唤起地图选取。

3.根据用户信息把用户经纬度传给百度地图组件，回显座标。

4.把获取的经纬度地址截取成数组让mongodb识别。

var locations = this.storeLocation.split(',')
StoreLocation = [Number(locations[0]), Number(locations[1])]

准备工作：申请百度地图开放平台Key（省略...）

//在index.html主文件中导入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的key"></script>

描述一下：这个路径，通常导入是不带https://前缀的。在上线后，如果访问路径是http访问不会有问题，如果是https访问方式，请带上https://前缀。不然你的访问不被信任依赖不可被访问。（我这里就是上线炸了，滑稽）

 

Vue模块：

创建一个组件

<template>
	<div>
		<div id="allmap" style="width: 100%; height: 400px;"></div>
		<div id="r-result" style="background: #FFFFFF; z-index: 999; position: absolute; margin-top: -420px;">
			<span style="font-weight: bold; padding: 0px 10px 0px 10px;">{{$t('Map.MapInputDesc')}}:</span><br />
			<a-input type="text" id="suggestId" size="20" :placeholder="this.$t('Map.MapInputDesc')" :style="width" @keydown="box"/><br />
		</div>
		<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		<!--<span id="choosePoints"></span><span>{{points.lng+'--'+points.lat}}</span>-->
		
	</div>
</template>

<script>
	
	export default {
		name: "AddressSelection",
		data() {
			return {
				points: { lng: '', lat: '' },
				width:"width:300px;"
			}
		},
		created(){
			if(document.body.clientWidth<=375){
				this.width="width:240px;"
			}
		},
		mounted() {
//			console.log(this.storeLocation)
			/**
			 * 过于麻烦描述一下，以免以后忘记了。
			 * 1.父组件传递经纬度参数过来，子组件接收后，将它的数据格式维护成复合百度地图的数据格式
			 * 2.判断父组件传递过来的经纬度参数是否为空，如果为空，则启用浏览器定位，如果不为空则将经纬度参数传给百度地图回显。
			 * 3.根据搜索和点击事件回传经纬度参数给父组件。
			 */
			var a = {lng:this.storeLocation[0],lat:this.storeLocation[1],of: "inner"}
			var map = new BMap.Map("allmap");
			if(this.storeLocation.length==2){
				var point = new BMap.Point(this.storeLocation[0],this.storeLocation[1]);
				map.centerAndZoom(point,16);
				map.addOverlay(new BMap.Marker(a))
			}else{
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					map.centerAndZoom(r.point, 16); //根据浏览器定位,设置城市和地图级别。
				})
			}
			var that = this;
			//地图点击事件。获取点击位置经纬度位置
			map.addEventListener('click', function(e) {
				that.points = { lng: e.point.lng, lat: e.point.lat }
				that.$emit("point",{ lng: e.point.lng, lat: e.point.lat })
				//document.getElementById("choosePoints").innerHTML=e.point.lng+","+e.point.lat
//				console.log(e.point);
				//清除所有地图座标
				map.clearOverlays();
				//添加地图座标
				map.addOverlay(new BMap.Marker(e.point))
			})

			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});

			ac.addEventListener("onhighlight", function(e) {//鼠标放在下拉列表上的事件
//				console.log(e)
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if(e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

				value = "";
				if(e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				document.getElementById("searchResultPanel").innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
//				console.log(e)
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				document.getElementById("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

				map.clearOverlays(); //清除地图上所有覆盖物

				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					//document.getElementById("choosePoints").innerHTML=pp.lng+","+pp.lat
					that.points = { lng: pp.lng, lat: pp.lat } //搜索位置的经纬度座标
					that.$emit("point",{ lng: pp.lng, lat: pp.lat })
//					console.log(pp) //搜索位置的经纬度座标
					map.centerAndZoom(pp, 16);
					map.addOverlay(new BMap.Marker(pp)); //添加标注
				}
				var local = new BMap.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			});
		},
		methods: {
			box(){
				//监听键盘事件，重新设置style参数。在弹窗中需要这样做。不然搜索回显数据显示不出来。
				var suggestion = document.getElementsByClassName("tangram-suggestion-main")
//				console.log(suggestion)
//				console.log("display:flex;z-index:1000;"+"position:"+suggestion[0].style.position+";"+"left:"+suggestion[0].style.left+";"+"top:"+suggestion[0].style.top+";"+"width:"+suggestion[0].style.width+";")
				suggestion[0].style.position="absolute"
				suggestion[0].style.display="flex"
				suggestion[0].style.left=suggestion[0].style.left
				suggestion[0].style.top=suggestion[0].style.top
				suggestion[0].style.width=suggestion[0].style.width
				suggestion[0].style.cssText="display:flex;z-index:1000;"+"position:"+suggestion[0].style.position+";"+"left:"+suggestion[0].style.left+";"+"top:"+suggestion[0].style.top+";"+"width:"+suggestion[0].style.width+";"
			}
		},
		props:{
			storeLocation:{
				type:Array,
				default:[]
			},
		},
		
		components: {}
	}
</script>

<style lang="scss" scoped>
	#allmap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
	}.tangram-suggestion-main{
		display: flex;
		position: absolute;
		left: 164px;
		top: 143px;
		width: 300px;
		
	}
</style>

引用模块

<template>
	<div style="margin-left: 20px; display: flex; overflow: hidden;">
		<a-row :gutter="16">
			<a-col :md="24" :lg="16">
                    <a-form-item label="输入或选取您的地理位置">
						<a-input-search  v-model="storeLocation" @search="onSearch">
							<a-button slot="enterButton">
						        唤起地图
						    </a-button>
						</a-input-search>
					</a-form-item>
            </a-col>
        </a-row> 

      
        <a-modal
	      :title="this.$t('Map.MapTitle')"
	      :visible="visible"
	      :confirm-loading="confirmLoading"
	      @ok="handleOk"
	      @cancel="onClose"
	    >
	      <addressSelection :storeLocation="storeLocation" v-on:point="point"></addressSelection>
	    </a-modal> 
    </div>
</template>

import addressSelection from '@/views/account/settings/page/AddressSelection'

export default {
		name: "index1",
		data() {
			return {
                visible: false,
                storeLocation:[]
            }
        },
        methods: {
			onSearch(e){
				this.visible = true
			    console.log(e);
            },
            onClose(){
		      	this.visible = false;
		    },
            handleOk(e){
		        this.visible = false;
		    },
            point(e){
		    	console.log(e)
		    	this.storeLocation=[e.lng,e.lat]
		    },
		},
        components: {
			addressSelection
		}
}

效果：