javascript - 问题：求教，如何正确在vue中引入地图amap组件？

Question

问题：求教，如何正确在vue中引入地图amap组件？
问题描述：

我按照amap文档的步骤，尝试在引入的地图上设置定位按钮时出错。在不断改正后仍然没有结果，在网上寻找答案也没找到符合情况的解决方案，（我是新手，对很多配置操作不太了解，不知道哪里出错了）。

问题截图：

vue块代码：

<template>  <!-- 地图容器大小 -->  <div class="amap-wrap">    <!-- <div class="amap-page-container"> -->      <!-- 载入地图 -->      <el-amap        id="amapContainer"        :zoom="zoom"        :events="events"        class="amap-demo"      >        <!-- 定位插件 -->        <el-amap-control-geolocation :visible="visible" @complete="getLocation">        </el-amap-control-geolocation>      </el-amap>      <div class="toolbar">        <button @click="switchVisible()">          {{ visible ? "隐藏" : "显示" }}        </button>      </div>    <!-- </div> -->  </div></template>    <script>  //引入组件//import VueAMap from 'vue-amap';import { lazyAMapApiLoaderInstance} from "vue-amap";export default {  name: "MyComponent",  //组件定义  components:  {    //'el-amap':VueAMap.AMap,   'el-amap-control-geolocation': VueAMap.getLocation,  },  // 数据 方法  data() {    return {      map: null,      zoom: 17,      events: {},      visible: true,    };  },  methods: {    switchVisible() {      this.visible = !this.visible;    },    getLocation(e) {      console.log("getLocation: ", e);    },  },  mounted() {    //加载高德地图的API    lazyAMapApiLoaderInstance.load().then(() => {      this.map = new window.AMap.Map("amapContainer", {        center: new window.AMap.LngLat(121.530072, 31.24053),        zoom: this.zoom,      });      var marker = new window.AMap.Marker({        map: this.map,        //光点图标        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",        position: [121.530072, 31.24053],      });      marker.setMap(this.map);    });  },};</script><!--   -->  <style scoped>.amap-wrap {  height: 100%;}.amap-demo {  height: 

main.js代码:

import Vue from 'vue'import App from './App.vue'import router from './router'// ------//// 引入 element ui 组件目录import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';//------//// 引入 vueAMap  组件目录import VueAMap from 'vue-amap';//import VueAMap from '@vuemap/vue-amap'Vue.config.productionTip = false//使用ElementUI 组件Vue.use(ElementUI);//使用VUeAMap 组件Vue.use(VueAMap);////Vue.use(ElAmapControlGeolocation);//引入地图所需插件VueAMap.initAMapApiLoader({  key: '522c38a157a79039e70cd2a3e41d03c1',  //引入的插件  plugin: [ "AMap.getLocation","AMap.AMap",],  //版本号  v: '1.4.4',  uiVersion: '1.0' // 版本号});window._AMapSecurityConfig ={ securityJsCode:'bc492f3261717a214ce01902b8c941ce'}//------//new Vue({  router,  render: h => h(App)}).$mount('#app')

eslintrc.js配置：

module.exports = {    "env": {        "commonjs": true,        "es6": true,        "node": true    },    "extends": "eslint:recommended",    "parserOptions": {        "ecmaVersion": 2018    },    "rules": {        "indent": [            "error",            4        ],        "linebreak-style": [            "error",            "unix"        ],        "quotes": [            "error",            "double"        ],        "semi": [            "error",            "always"        ],        }    ,    globals: {        'AMap': true,        'AMapUI': true      }}这里面还有类似于 必须引入Vue.AMap, 但必须加window.前缀的问题，以及组件无法识别的问题。不知道该怎么改。

Answer 1

在Vue中引入高德地图的amap组件，你需要注意以下几点：

1. 确保你已经正确安装并引入了vue-amap。
2. 在main.js文件中正确初始化VueAMap。
3. 在你的组件中，你需要确保正确引用了el-amap和el-amap-control-geolocation组件。

下面是一个修改后的代码示例，你可以参考这个示例来调整你的代码：

main.js:

import Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import VueAMap from 'vue-amap';Vue.config.productionTip = falseVue.use(ElementUI);Vue.use(VueAMap);VueAMap.initAMapApiLoader({  key: '你的高德地图API Key',  plugin: ['AMap.Geolocation'], // 只引入需要的插件  v: '1.4.15'});new Vue({  router,  render: h => h(App)}).$mount('#app')

你的组件:

<template>  <div class="amap-wrap">    <el-amap      id="amapContainer"      :zoom="zoom"      :events="events"      class="amap-demo"      :vid="'amap_' + randomId" <!-- 添加一个唯一的vid，避免多个地图实例冲突 -->    >      <el-amap-control-geolocation        :button-position="'RB'"        :show-button="true"        :show-circle="true"        :pan-to-location="true"        :zoom-to-accuracy="true"        @click="handleGeolocation"      ></el-amap-control-geolocation>    </el-amap>  </div></template><script>export default {  name: "MyComponent",  data() {    return {      zoom: 17,      events: {},      randomId: Math.random().toString(36).substr(2, 9), // 生成随机ID，确保vid唯一    };  },  methods: {    handleGeolocation(e) {      console.log("定位成功", e);    },  },};</script><style scoped>.amap-wrap {  height: 100%;}.amap-demo {  height: 100%;}</style>

请注意以下几点：

• 在main.js中，我移除了plugin数组中的AMap.AMap，因为vue-amap已经默认包含了AMap的基础功能。我只保留了AMap.Geolocation，这是定位插件。
• 在你的组件中，我为el-amap添加了一个:vid="'amap_' + randomId"属性。这是为了确保每个地图实例都有一个唯一的ID，避免多个地图实例之间的冲突。
• 我还为el-amap-control-geolocation添加了一些属性，如:button-position, :show-button, :show-circle等，你可以根据需要进行调整。
• 在el-amap-control-geolocation上，我添加了一个@click事件监听器handleGeolocation，当点击定位按钮时，会调用这个方法并打印定位结果。你可以在这个方法中添加你需要的定位逻辑。

希望这个示例能帮助你解决问题！如果你还有其他问题或需要进一步的帮助，请随时提问。