高德地图 Autocomplete + 设置marker

          

js 引入    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4d81136d607c68fb6c906599c0bd1de1&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

为组件，直接使用。

<template>
	<div>
		<div style="display: flex;">
			<el-select size="mini" @change="initAutocompleteCity"  filterable v-model="cityName" placeholder="选择城市">
				<el-option  v-for="data in cityLists" :key="data.city_name" :label="data.city_name" :value="data.city_name"></el-option>
			</el-select>
			<el-input style="width: 440px;margin-left: 10px;" size="mini" id="tipinput" v-model="searchWeizhi" placeholder="输入关键字"></el-input>
		</div>
		<div id="container" style="margin-top: 10px;"></div>
		<span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;margin-top: 20px;">
			
			<el-button type="primary" @click="sureOpanre">确 定</el-button>
		</span>
	</div>
</template>

<script>
	var geocoder,marker,lnglat,map,searchmap,Autocomplete;
	export default{
		data(){
			return{
				cityName:'',
				searchWeizhi:'',
				lishiLat:[]
			}
		},
		props:{
			cityLists:{
				type:Array
			}
		},
		mounted() {
			this.intialMap();
		},
		created() {
			
		},
		updated() {
			
		},
		methods:{
			sureOpanre(){
				this.$emit('comfirmOparete',{
					name:this.searchWeizhi,
					lng:this.lishiLat[0],
					lat:this.lishiLat[1]
				})
			},
			intialMap(){
				let that = this;
				setTimeout(()=>{
					map = new AMap.Map('container', {
						resizeEnable: true, //是否监控地图容器尺寸变化
						zoom: 11 //初始化地图层级
					});
					map.on('click',function(e){
						console.log(e)
						map.clearMap();
						lnglat = e.lnglat;
						that.lishiLat =  [lnglat.lng, lnglat.lat];
						marker = new AMap.Marker();
						map.add(marker);
						marker.setPosition(lnglat);
						that.lngatByAdress(lnglat);
						
					})
					this.initAutocompleteCity();
				},200)
			},
			lngatByAdress(lnglat){
				let that = this;
				geocoder = new AMap.Geocoder({
					city: '全国', //城市设为北京，默认：“全国”
					radius: 1000 //范围，默认：500
				});
				geocoder.getAddress(lnglat, function(status, result) {
					console.log('result',lnglat);
					if (status === 'complete'&&result.regeocode) {
						var address = result.regeocode.formattedAddress;
						that.searchWeizhi  = address;
					}else{
						
					}
				})
			},
			initAutocompleteCity(){
				// $('.amap-sug-result').remove();
				var autoOptions = {
					input: "tipinput",
					city: this.cityName
				};
				map.clearMap();
				this.searchWeizhi = '';
				var auto = new AMap.Autocomplete(autoOptions);
				AMap.event.addListener(auto, "select", this.select);
				
			},
			select(e){
				
				var lng = Number(e.poi.location.lng);
				var lat = Number(e.poi.location.lat)
				let _that = this;
				map.clearMap();
				map.setCenter([lng, lat])
				this.lishiLat =  [lng, lat];
				var  marker = new AMap.Marker({
					position : [lng, lat]
				});
				map.add(marker);
				_that.lngatByAdress(_that.lishiLat);
			},
		}
	}
</script>

<style>
	#container {
		width: 100%;
		height: 300px;
	}
	.amap-sug-result{
		z-index: 999999999999999;
	}
</style>