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
		}
}

效果：