vue 使用高德地图制作一个搜索，地图选址的组件

RjwWorld

已于 2022-04-22 10:33:00 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：组件 vue 文章标签： vue.js 前端

于 2022-01-06 17:10:16 首次发布

本文链接：https://blog.csdn.net/RjwWorle/article/details/122347274

vue 使用高德地图制作一个搜索，地图选址的组件

效果展示

引入高德地图

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key去高德申请很快&plugin=AMap.MouseTool,Amap.PlaceSearch,Amap.Geocoder"></script>

子组件，上完整代码

dom中basic-dialog是我们自己封装的弹窗组件，可以改为自己的弹窗组件如element的el-dialog
组件的回显通过show方法传入一个对象包含经纬度和地址名称
需要子组件emit给父组件的对象中包含什么字段可以自己组装通过submit方法传出去

<template>
  <basic-dialog title="选择位置" :visible="visible" width="55%" @close="close" custom-class="sm-padding-dialog">
    <div class="top-search">
      <el-input v-model="searchInput" placeholder="请输入内容" class="search-input"/>
      <el-button type="primary" @click="searchAddress">搜索</el-button>
    </div>
    <div ref="map" class="map"/>
    <div id="panel"/>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </basic-dialog>
</template>

<script>

// var zoom = 16;
export default {
  name: 'MapChoose',
  data() {
    return {
      // dialog
      visible: false,
      modal: {},
      id: '',
      // map
      map: null,
      mouseTool: null,
      polygon: null,
      markers: null,
      pla