在vue-cli项目中，如何使用高德地图

在vue-cli项目中，如何使用高德地图

要求：
1、可以根据经纬度定位，可以按关键字搜索。可以点击返回经纬度和地理位置信息。
2、封装成vue组件

首先在高德地图官网申请key，不做解释。在项目的 index.html 中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

组件代码：

<template>
	<div class="map_container flex_start">
		<div id="container" ref="container"></div>		
		<div class="map_container_right">
			<input id="tipinput" type="text" placeholder="请输入关键子搜索" />
			<div class="tips_words">经度：{{ longitude }}</div>
			<div class="tips_words">纬度：{{ latitude }}</div>
			<div class="tips_words">地址：{{ address }}</div>
		</div>			
	</div>	
</template>

<script>
export default {
	name: 'vlAmap',
	props: {
		lnglat: { // 前端传坐标点
			type: Array,
			
			default:() => []
		},
		mapStyle: { // 设置地图样式
			type: String,
			default: ""
		},
		scale: {
			type: Boolean,
			default: false
		},
		mapType: {
			type: Boolean,
			default: false
		},
		toolBar: {
			type: Boolean,
			default: false
		},
		overView: {
			type: Boolean,
			default: false
		},
		mouseTool: {
			type: Boolean,
			default: false
		},
		zoom:{
			type: Number,
			default: 18
		}
	},
	data () {
		return {
			placeSearch: null,
			point:this.lnglat,
			address:'',
			longitude:'',
			latitude:''
		}
	},
	watch:{
		lnglat:function(val){
			this.initMap(this.point);
		},
		mapStyle:function(val){
			this.initMap(this.point);
		},
		scale:function(val){
			this.initMap(this.point);
		},
		mapType:function(val){
			this.initMap(this.point);
		},
		toolBar:function(val){
			this.initMap(this.point);
		},
		overView:function(val){
			this.initMap(this.point);
		},
		mouseTool:function(val){
			this.initMap(this.point);
		}
	},
	mounted() {
		this.initMap(this.point);
	},
	methods:{
		initMap(lnglat){
			/* =======================
				初始化地图
			========================*/
			var map = new AMap.Map(this.$refs.container, {
				resizeEnable: true, //是否监控地图容器尺寸变化
				zoom:this.zoom, //初始化地图层级
				mapStyle: this.mapStyle,  //设置地图的显示样式
				visible: true
			});
			
			/* =======================
				初始化地图空间
			========================*/
			if(this.scale === true){
				map.plugin(['AMap.Scale'], function(){ // 加载比例尺控件
					var scale = new AMap.Scale();
					map.addControl(scale);
				});
			}
			if(this.mapType === true){
				map.plugin(['AMap.MapType'], function(){ // 加载地图类型
					var type= new AMap.MapType();
					map.addControl(type);
				});
			}
			if(this.toolBar === true){
				map.plugin(['AMap.ToolBar'], function(){ // 加载工具条模块
					var tool = new AMap.ToolBar();
					map.addControl(tool);
				});
			}
			if(this.overView === true){
				map.plugin(['AMap.OverView'], function () { // 加载鹰眼工具
					var view = new AMap.OverView();
					view.open();
					map.addControl(view);
				});
			}
			if(this.mouseTool === true){
				map.plugin(['AMap.MouseTool'], function(){  // 测量面积控件
					var tool = new AMap.MouseTool(map);
					tool.measureArea();
				});
			}
			
			
			
			/* =======================
				给地图添加点击事件
			========================*/
			const that = this
			AMap.event.addListener(map, 'click', function(e) {
				map.clearMap() // 清除地图上所有添加的覆盖物
				new AMap.Marker({
					position: e.lnglat,
					map: map
				})
				let points = [e.lnglat.getLng(), e.lnglat.getLat()]
				that.getAddress(points)
				// that.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
				setTimeout(function(){
					that.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
				},100)
			})
			
			
			/* =======================
				设置地图搜索功能
			========================*/
			// 输入提示
			const autoOptions = {
				input: 'tipinput'
			}
			const auto = new AMap.Autocomplete(autoOptions)
			this.placeSearch = new AMap.PlaceSearch({
				map: map
			}) // 构造地点查询类
			AMap.event.addListener(auto, 'select', this.select)// 注册监听，当选中某条记录时会触发
			AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
				map.clearMap()
				let points = [e.lnglat.getLng(), e.lnglat.getLat()]
				that.getAddress(points)
				// that.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
				setTimeout(function(){
					that.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
				},100)
			})
						
			/* =======================
				设置地图中心，定位
			========================*/
			this.currentPosition (map, lnglat); 
		},
		select(e) {
			this.placeSearch.setCity(e.poi.adcode)
			this.placeSearch.search(e.poi.name) // 关键字查询查询
		},
		currentPosition (map, lnglat) {
			let that = this
			if (lnglat && lnglat.length === 2) { // 有传入坐标点，直接定位到坐标点
				map.setCenter(lnglat)
				this.longitude = lnglat[0]
				this.latitude = lnglat[1]
				this.addMark(map, lnglat)
				this.getAddress(lnglat)
			} else {
				console.log(AMap)
				map.plugin(['AMap.Geolocation'], function() {
					const geolocation = new AMap.Geolocation({
						enableHighAccuracy: true,//是否使用高精度定位，默认:true
						timeout: 10000,          //超过10秒后停止定位，默认：无穷大
						maximumAge: 0,           //定位结果缓存0毫秒，默认：0
						convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
						showButton: true,        //显示定位按钮，默认：true
						buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
						buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
						showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
						panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
						zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					})
					// map.addControl(geolocation)
					geolocation.getCurrentPosition((status, result) => {
						if (status === 'complete') {
							let points = [result.position.lng, result.position.lat]
							// map.setCenter(points) // 设置中心点
				// 			this.addMark(map, points) // 添加标记
				
				// 			// 存下坐标与地址
							
							map.setCenter(points)
							that.longitude = points[0]
							that.latitude = points[1]
							that.addMark(map, points)
							that.getAddress(points)
						} else {
							console.log(result)
						}
					})
				})
			}
		},
		async handleMap(o, a) {			
			this.longitude = o
			this.latitude = a
			await this.$emit('mapInfo', o, a, this.address)	
		},
		// 添加标记
		addMark (map, points) {
			let marker = new AMap.Marker({
				map: map,
				position: points,
				draggable: true, // 允许拖动
				cursor: 'move',
				raiseOnDrag: true
			})
			marker.on('dragend', (e) => {
				let position = marker.getPosition()
				// 存下坐标与地址
				this.point = [position.lng, position.lat]
				this.getAddress([position.lng, position.lat])
			})
		},
		// 根据坐标返回地址(逆地理编码)
		async getAddress (points) {
			let that = this
			await AMap.plugin(['AMap.Geocoder'], function() {
				let geocoder = new AMap.Geocoder({ radius: 1000 })
				geocoder.getAddress(points, (status, result) => {
					if (status === 'complete') {
						that.address = result.regeocode.formattedAddress
					}
				})
			})
		},
	}
}	
</script>

<style scoped>
*{
	padding: 0;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
}

[class*="flex"] { display: flex; }
[class*="itemsCenter"] { align-items: center; } /* 竖直对齐 */  /*+*/
[class*="itemsEnd"] { align-items: flex-end; } /* 竖直对齐 */  /*+*/
[class*="flex_start"] { justify-content: flex-start; }
[class*="flex_end"] { justify-content: flex-end; } /*+*/
[class*="flex_center"] { justify-content: center; }


.map_container{
	width: 100%;
	background-color: #d0d0d0;
	padding: 10px;
}
#container {
	width: calc(100% - 200px);
	height: 400px;
	border: 1px #dddddd solid;
	position: relative;
}
.map_container_right{
	background-color: white;
	width:200px;
	text-align: left;
	font-size: 16px;
	padding: 10px;
}
input{
	height: 30px;
	border-radius: 3px;
	padding-left: 5px;
	border: 1px solid #999;
	margin-bottom: 10px;
}
.tips_words{
	line-height: 30px;
	font-weight: bold;
	width: 100%;
	text-align: left;
}
</style>