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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。