vue-amap在vue中引入方式
2023-12-29 18:58:33
1.安装 vue-amap 插件。你可以通过在终端中运行以下命令来安装:
npm install vue-amap --save
2.在main.js文件中引入 vue-amap 并初始化高德地图:
import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '你的高德地图API Key',
plugin: [
'AMap.Geolocation',
'AMap.Autocomplete',
'AMap.PlaceSearch'
],
// 高德 SDK 版本,默认为 1.4.15
v: '1.4.15'
});
3.在Vue组件中使用高德地图。例如,在一个名为Map.vue的组件中,可以添加如下代码:
<template>
<div>
<el-amap
:zoom="10"
:center="centerPoint"
class="map-container"
ref="amap">
<el-amap-marker
:position="markerPosition"
@click="handleMarkerClick">
</el-amap-marker>
</el-amap>
</div>
</template>
<script>
export default {
data() {
return {
centerPoint: [116.397428, 39.90923],
markerPosition: [116.397428, 39.90923]
};
},
methods: {
handleMarkerClick(e) {
console.log('Marker clicked', e);
}
}
};
</script>
<style scoped>
.map-container {
width: 100%;
height: 400px;
}
</style>
在需要显示地图的页面中引入并使用Map组件:
<template>
<div>
<h1>高德地图示例</h1>
<Map />
</div>
</template>
<script>
import Map from '@/components/Map.vue';
export default {
name: 'MapPage',
components: {
Map
}
};
</script>
文章来源:https://blog.csdn.net/weixin_43857653/article/details/135292000
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!