vue2+vue-amap 鼠标点击地图获取对应地址

duyueping

已于 2023-12-02 15:08:37 修改

阅读量493

点赞数 9

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2023-12-02 12:11:29 首次发布

本文链接：https://blog.youkuaiyun.com/duyueping/article/details/134749850

版权

子组件

html

<template>
  <div id="amapcontainer"></div>
</template>

js

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
   
  securityJsCode: '7a098xxxxxxxxxxxxx1cd8b' // '「申请的安全密钥」',更换成自己的
}
export default {
   
  data () {
   
    return {
   
      map: null, //地图示例
      addr:'' //地址解析之后的地址值
    }
  },
  mounted () {
   
    // DOM初始化完成进行地图初始化
    this.initAMap()
  },
  methods: {
   

    initAMap () {
   
      let that = this
      AMapLoader.load({
   
        key: "141fxxxxxxxxxxxxxxxxxxxxxx91c", // 申请好的Web端开发者Key，首次调用 load 时必填 更换成自己的的
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins