vue使用vue-amap

最新推荐文章于 2024-07-23 15:55:45 发布

酸奶(●'◡'●)

最新推荐文章于 2024-07-23 15:55:45 发布

阅读量548

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/employerboos/article/details/108643675

版权

vue-amap是一套基于Vue 2.0和高德地图的地图组件。
安装：

cnpm install -S vue-amap

在main.js配置

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: '自己的key值',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  v: '1.4.4'
});

key值申请
https://lbs.amap.com/
进入控制台——应用管理——我的应用申请。

<template>
	<div>
		<div class="amap-wrapper">
			<el-amap vid="amapDemo" :zoom="zoom" :center="center">
				<el-amap-marker v-for="marker in markers" :position="marker.position"></el-amap-marker>
			</el-amap>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				center: [11, 23],
				zoom: 18,
				icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
				markers: [{
					position: [11, 23]
				}]
			}
		}
	}
</script>

<style scoped>
	.amap-wrapper {
		width: 100%;
		height: 25rem;
		box-sizing: border-box;
		padding: 1.5rem;
	}
</style>