Vue+高德地图API的使用

        浏览器搜索 高德开放平台 或者 高德地图API

        链接地址：https://lbs.amap.com/

 

 

 

---

二、创建Vue项目 

Vue2跟Vue3的差别不大，用哪个都可以

使用npm 安装 高德地图 

按 NPM 方式使用 Loader

npm i @amap/amap-jsapi-loader --save

1. 删除vue自动配置的vue页面
2. 在views文件夹中创建index.vue  主页面
3. 在components里面创建map文件夹   用来放 所有地图的东西
4. 在map文件夹中创建index.vue 地图实例

 在main.js页面中配置安全密钥

//配置安全密钥
window._AMapSecurityConfig = {
	securityJsCode: '你的安全密钥' //*  安全密钥
}

---

 引入地图实例组件

        在views/index.vue中  

        将地图封装组件

//views/index.vue   主页面
<template>
	<div class="content">

		<!-- 地图实例 -->
		<div class="Map">
			<IndexMap></IndexMap>
		</div>
	</div>
</template>

<script>
	import IndexMap from "../components/map/index.vue"
	export default {
		name: 'IndexView',
		components: {
			IndexMap
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>

---

地图的准备工作

进入components/map/index.vue 页面

<template>
	<div class="content">
		<!-- 用来显示地图 -->
        <!-- 可以不写宽度，但一定要有高度 -->
		<div id="Map" style="height: 100vh;">
		</div>
	</div>
</template>

 initMap事件最好写在mounted里面

<script>
    //引入高德地图
	import AMapLoader from '@amap/amap-jsapi-loader'
	export default {
		name: 'IndexMap',
		data() {
			return {
                map: null, //地图实例
			}
		},
		mounted() {
			this.initMap()
		},
		methods: {
			initMap() {
				AMapLoader.load({
					key: "输入你的Key", // 申请好的Web端开发者Key，首次调用 load 时必填
					//2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBar
					version: "1.4.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					resizeEnable: true,
					plugins: [
						"AMap.ToolBar", //工具条
						"AMap.Scale", // 比例尺
						"AMap.Geolocation", //定位
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					console.log(AMap);
					this.map = new AMap.Map("Map", { //设置地图容器id
                   /这里的参数有许多可根据需要添加  点击下面《map地图参数》跳转
						viewMode: "3D", //是否为3D地图模式
						zoom: 14, //初始化地图级别
						center: [116.397128, 39.916527], //初始化地图中心点位置
					});
				}).catch(e => {
					console.log(e);
				})
			}
		}
	}
</script>

map地图参数

这样地图就展示出来了