vue+高德地图/ el-amap

火星代码

已于 2024-02-26 08:27:14 修改

阅读量1k

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-02-22 16:12:21 首次发布

本文链接：https://blog.csdn.net/lllllllssssccc/article/details/136236423

版权

一在高德官网申请账号，key和样式地图

1、控制台访问地址，在控制台申请key高德控制台 (amap.com)https://console.amap.com/dev/index

2、应用管理->我的应用->添加key

二vue项目中使用

1、下载依赖

npm install --save vue-amap

2、main.js中引入

import VueAMap from '@vuemap/vue-amap';

Vue.use(VueAMap)


VueAMap.initAMapApiLoader({
  key: '你的key值',
   plugin: [            //引入地图功能
     'AMap.PlaceSearch', //POI搜索插件
    'AMap.Autocomplete', //输入提示插件
    'AMap.Scale', //右下角缩略图插件 比例尺
    'AMap.PolyEditor', //编辑 折线多，边形
   
  ]
});

3、在页面中使用

template

  <el-amap vid="amap" :zoom="zoom" :center="center" ref="map" class="amap-demo">
          <el-amap-rectangle :bounds="path" :visible="visible" :editable="editRan" 
            draggable @click="click" @move="move" @adjust="adjust"></el-amap-rectangle>
           <el-amap-search-box :visible="visibleSearch" @select="selectPoi" 
            @choose="selectPoi"/>
  </el-amap>

全部代码：

<template>
      <el-amap vid="amap" :zoom="zoom" :center="center" ref="map" class="amap-demo">
                <el-amap-rectangle :bounds="path" :visible="visible" :editable="editRan" draggable @click="click"
                                   @move="move" @adjust="adjust"></el-amap-rectangle>
                <el-amap-search-box :visible="visibleSearch" @select="selectPoi" @choose="selectPoi"/>
       </el-amap>
             
</template>

<script>



  export default {
    name: 'ReportAreaForm',
    data() {
      return {
       
        zoom: 12,
        center: [117.970675, 37.38268],
        draggable: false,
        visible: true,
        editRan: true,
        //117.976759
        path: [[117.976759, 37.387188], [117.964630, 37.378860]],
        visibleSearch: true
      }
    },
    computed: {
     
    },
    created() {
     
    },
    methods: {
      switchVisible() {
        this.visible = !this.visible
      },
      selectPoi(e) {
        this.visible = false
        let lat = e.poi.location.lat
        let lng = e.poi.location.lng
        console.log('selectPoi: ', e, e.poi.location.lat, ' ', e.poi.location.lng)
        this.center = [lng, lat]
        this.path = [[lng + 0.006084, lat + 0.004508], [lng - 0.006045, lat - 0.00402]]
        this.model.longitude1 = lng + 0.006084
        this.model.latitude1 = lat + 0.004508
        this.model.longitude2 = lng - 0.006045
        this.model.latitude2 = lat - 0.00402
        this.visible = true

      },
      click: (e) => {
        // console.log('点击', e, this.path, this.center)
      },
      toggleVisible() {
        this.visible = !this.visible
      },
      changeDraggable() {
        this.draggable = !this.draggable
      },
      toggleEdit() {
        this.editRan = !this.editRan
        console.log('点击', this.path, this.center)
      },
      adjust(e) {
        console.log('adjust:', e)
        this.model.longitude1 = e.bounds.southWest.lng
        this.model.latitude1 = e.bounds.southWest.lat
        this.model.longitude2 = e.bounds.northEast.lng
        this.model.latitude2 = e.bounds.northEast.lat
        console.log('adjust:', this.model)
      },
      move(e) {
        console.log('move:', e)
        this.model.longitude1 = e.bounds.southWest.lng
        this.model.latitude1 = e.bounds.southWest.lat
        this.model.longitude2 = e.bounds.northEast.lng
        this.model.latitude2 = e.bounds.northEast.lat
        console.log('move:', this.model)
      },
      add() {
        this.edit(this.modelDefault)
      },
    }
  }
</script>
<style>
  .amap-demo {
    height: 500px;
  }
</style>

通过 vid 属性给地图实例赋予了一个ID为 "amap"。:zoom 和 :center 分别表示地图的初始缩放级别（由变量 zoom 控制）和中心点坐标（由变量 center 控制）。ref="map" 是 Vue 中用来获取地图实例引用的方式，便于后续操作。.amap-demo 是 CSS 类名，可以自定义地图样式。

最终显示：