Vue2中实现地图选点功能（腾讯地图）

1. 前言

        最近的项目中，涉及到了需要地图选点的功能，要获取选中点的经纬度，所以就此写下该文章记录一下，以便后面自己或需要的人查阅

        我的项目是 使用若依+Element-ul开发的后台管理项目，用的地图是腾讯地图

        

2. 实现的步骤

        先导入腾讯地图的包，以调用api

        封装一个地图选点组件，以便复用

        实现对应的方法

3. 具体代码

        1. 引入qqmap 

npm install qqmap

        2. 封装组件

        map_src 和 map_data 内的 key值为腾讯地图的key，这里我用xxx代替了

<template>
    <el-dialog
        width="60%"
        title="地图选点"
        :visible.sync="isDialog"
        append-to-body>
        <iframe width="100%" height="100%" style="border: none;width:100%;height: 500px;" :src="map_src"></iframe>
    </el-dialog>
</template>
  
  <script>
    export default {
      data() {
        return {
          map_src: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=xxxxxxxxx&referer=location',
          form: {
            //省市区ID
            id_area: [
              0,
              0,
              0
            ],
            address: '',
            lng: '',
            lat: '',
          },
          map_data: {
            url: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=xxxxxxxxx&referer=location',
            address: '',
            lng: '',
            lat: '',
          },
          isDialog: false, // 控制模态框
        }
      },
      created() {
        this.getInfo()
      },
      methods: {
        // 选择
        getInfo(){
            let that = this
            window.addEventListener('message', function(event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            //   console.log(loc)
            if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                that.map_data.address = loc.poiaddress
                that.map_data.lat = loc.latlng.lat
                that.map_data.lng = loc.latlng.lng
                //调用父组件方法并传值给父组件
                // console.log('map_data', that.map_data);
                that.$emit('chooseOrgAddr',that.map_data)
            }
            }, false);
        },
        // 父组件调用方法,打开模态框
        openDialog() {
            this.isDialog = true
        },
        // 关闭模态框
        closeDialog() {
            this.isDialog = false
        },
      }
    }
  </script>
  
  <style>

  </style>

        3. 在页面内引入使用

                引入组件并注册

import mapSelect from '@/components/map/mapSelect.vue'

components: {
    mapSelect,
},

                使用

<!-- 地图选点 -->
<mapSelect @chooseOrgAddr="chooseOrgAddr" ref="ref"></mapSelect>

                选取位置后的回调

// 选取地理位置后的回调
chooseOrgAddr(data){
    // console.log(data)
    this.info.latitude = data.lat
    this.info.longitude = data.lng
    this.$refs.ref.closeDialog()
},

                封装的组件内的方法

        // 选择
        getInfo(){
            let that = this
            window.addEventListener('message', function(event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            //   console.log(loc)
            if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                that.map_data.address = loc.poiaddress
                that.map_data.lat = loc.latlng.lat
                that.map_data.lng = loc.latlng.lng
                //调用父组件方法并传值给父组件
                // console.log('map_data', that.map_data);
                that.$emit('chooseOrgAddr',that.map_data)
            }
            }, false);
        },
        // 父组件调用方法,打开模态框
        openDialog() {
            this.isDialog = true
        },
        // 关闭模态框
        closeDialog() {
            this.isDialog = false
        },

可以实现：

        在页面内点击按钮，调用子组件内的方法，打开地图选点的模态框

        在模态框内移动地图，并在下面的列表数据中选中某条位置，会携带对应的经纬度，关闭模态框，返回到父组件的页面内

        这样就可以拿到经纬度了

图示：