su_nan-mobile_h5/src/pages/callus/map.vue

<template>
	<!-- 百度地图  -->
	<div id="bai-du-map">
		<!-- 技术支持和联系方式  -->

	</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
	// 设置安全密钥
	securityJsCode: 'b0a69d5602eae8990937ceb4699d2e7d'
}
export default {
	data() {
		return {
			map: null,
			mouseTool: null,
			overlays: [],
			auto: null,
			placeSearch: null
		}
	},
	methods: {
		initMap() {
			console.log(12312)
			AMapLoader.reset()
			AMapLoader.load({
				'key': 'b0a69d5602eae8990937ceb4699d2e7d', // 申请好的Web端开发者Key，首次调用 load 时必填
				'version': '2.0',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				'plugins': ['AMap.Scale', 'AMap.ToolBar', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.ControlBar', 'AMap.MouseTool']           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				// "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map('bai-du-map', {
					viewMode: '2D',  //  是否为3D地图模式
					zoom: 13,   // 初始化地图级别
					center: [120.366855, 31.492167], //中心点坐标  郑州
					resizeEnable: true
				})

				this.mouseTool = new AMap.MouseTool(this.map)
				let marker = new AMap.Marker({
					show: false,
					position: [120.366855, 31.492167],//要展示marker的经度、纬度。数据格式就是数组里放入经纬度数据
					// icon: require("../../../public/img/bg/site.png"), //显示的图标
					offset: [-16, -32]//图标偏移量，展示时会默认以图标的左上角为原点，不设置偏移量会导致地图放大缩小时造成图标偏移的情况，偏移量设置为图标宽度的负一半，负整个高度。
				})
				this.map.add(marker) //添加marker

				var info = []
				// info.push('<div style="padding:7px 0px 0px 0px;"><h4>无锡xxx公司</h4>')
				// info.push('<p class=\'input-item\'>电话 : 010-84107000   邮编 : 100102</p>')
				// info.push('<p class=\'input-item\'>地址 :江苏省无锡市新吴区演示街道测试地址xx大楼</p></div></div>')

				let infoWindow = new AMap.InfoWindow({
					content: info.join('')  //使用默认信息窗体框样式，显示信息内容
				})

				infoWindow.open(this.map, this.map.getCenter())

				this.mouseTool.on('draw', function(e) {
					this.overlays.push(e.obj)
				}.bind(this))
			}).catch(e => {
				console.log(e)
			})
			//1.创建Marker对象

		},
		draw(type) {
			switch (type) {
				case 'marker': {
					this.mouseTool.marker({
						//同Marker的Option设置
					})
					break
				}
				case 'polyline': {
					this.mouseTool.polyline({
						strokeColor: '#80d8ff'
						//同Polyline的Option设置
					})
					break
				}
				case 'polygon': {
					this.mouseTool.polygon({
						fillColor: '#00b0ff',
						strokeColor: '#80d8ff'
						//同Polygon的Option设置
					})
					break
				}
				case 'rectangle': {
					this.mouseTool.rectangle({
						fillColor: '#00b0ff',
						strokeColor: '#80d8ff'
						//同Polygon的Option设置
					})
					break
				}
				case 'circle': {
					this.mouseTool.circle({
						fillColor: '#00b0ff',
						strokeColor: '#80d8ff'
						//同Circle的Option设置
					})
					break
				}
			}

		}
	},
	mounted() {
		this.initMap()
	}
}
</script>
<style lang="scss">
#bai-du-map {
	height: 100vh;
	width: 100vw;

	.bottom-center {
		display: none !important;
	}
}
</style>