我的环境
- 电脑系统为Ubuntu,使用vscode编辑器
- 使用v-cli搭建的脚手架
- 地图组件使用vue-amap
- 使用vuetify组件
组件地址
首先需要去高德地图申请一个KEY
终端输入以下命令安装vue-amap组件
npm install vue-amap --save
在.vue文件(要显示地图的页面)中写入以下代码
<!-- 地图开始 -->
<v-flex xs12 md10>
<div class="amap-wrapper">
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:label="marker.label"
:key="marker.position"
></el-amap-marker>
</el-amap>
</div>
</v-flex>
<!-- 地图结束-->
<script>
export default {
data() {
return {
zoom: 12,
center: [100.59996, 26.197646],
markers: [
{ position: [100.59996, 26.197646], label: {content: "Point 1", offset: [10, 30]} },
{ position: [100.49996, 26.157646], label: {content: "Point 2", offset: [10, 30]} }
]
};
}
};
</script>
<style>
.amap-wrapper {
width: 100%;
height: 500px;
}
</style>
在main.js中写入以下代码
import VueAMap from "vue-amap";
Vue.use(VueAMap);
Vue.config.productionTip = false;
VueAMap.initAMapApiLoader({
key: "3bb4839d0397298c7b2b56ab6100f1f9", //输入自己申请好的高德地图key
plugin: ["AMap.Autocomplete", "AMap.PlaceSearch", "AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType", "AMap.PolyEditor", "AMap.CircleEditor"],
v: "1.4.4"
});