vue2中使用高德地图实现搜索定位(一)

vue2项目中有用到高德地图,以此记录:

需求:搜索可定位地点

过程:在vue2项目运行起地图,在点图实现点标记(mark),搜索功能,切换标记

vue-amap官方文档地址: https://github.com/ElemeFE/vue-amap/

安装 amap:

1
npm install vue-amap --save

地图搭建:

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import VueAMap from "vue-amap"
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: "xxxxxxxxxxxxxxx",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.Geolocation", //定位控件,用来获取和展示用户主机所在的经纬度位置
    "AMap.Geocoder"// 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 根据需求选用
  ],
  uiVersion: "1.0", // 地图ui版本
  v : '1.4.4' // amap版本
})

vue文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
  <div class="contain">
    <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
    </el-amap-search-box>
    <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo">
      <el-amap-marker :position="center" key="100"></el-amap-marker>
    </el-amap>
    <div v-if="searchResult">
      搜索:{{content}},详细地址为:{{searchResult.locationName}},经度:{{searchResult.longitude}},纬度:{{searchResult.latitude}}
    </div>
  </div>
</template>
 
<script>
  export default {
    name: 'AMapDemo',
    data() {
      return {
        zoom: 12,
        center: [118.02, 24.48],
        searchOption: {
          // 限制搜索城市的范围
          citylimit: false
        },
        content: '',
        inputValue: '',
        searchResult: {
          address: '',
          latitude: '',
          longitude: '',
          name: '',
          type: '',
          country: '',
          province: '',
          city: '',
          area: '',
          township: '',
          street: '',
          neighborhood: '',
          locationName: ''
        }
      }
    },
    methods: {
      onSearchResult(pois) {
        //搜索
        console.log(pois)
        let latSum = 0
        let lngSum = 0
        let that = this
        if (pois && pois.length > 0) {
          //如果长度为1则无需转化
          let poi = pois[0]
          let lng = poi["lng"]
          let lat = poi["lat"]
          that.center = [lng, lat]
          that.zoom = 13
          that.content = poi.name
          console.log(poi.name)
          that.searchResult.address = poi.address
          that.searchResult.latitude = poi.lat
          that.searchResult.longitude = poi.lng
          let geocoder = new AMap.Geocoder({})
          geocoder.getAddress(that.center, function(status, result) {
            console.log(result)
            if (status === 'complete' && result.info === 'OK') {
              let obj = result.regeocode.addressComponent
              that.searchResult.locationName = obj.province + obj.city + obj.district + obj.township + obj.street +
                poi.address
            }
          });
 
        } else {
          that.searchResult = []
        }
      },
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .amap-demo {
    width: 100%;
    height: 600px;
    position: relative;
  }
 
  .search-box {
    height: 35px;
    margin: 10px auto;
    width: calc(100% - 20px);
    // border-radius:16px;
    box-shadow: none;
    background: #ffff;
    border: 1px solid #e6e6e6;
 
    .search-box-wrapper {
      input {
        background: #fff;
        padding-left: 20px;
      }
 
      .search-btn {
        color: #2A67FE;
        width: 90px;
        height: 20px;
        box-sizing: border-box;
        border-left: 1px solid #D7D7D7;
      }
    }
  }
</style>

 最终效果如下:

 自此,高德地图完成部署,同时可搜索地点进行标记并且获取搜索点的经纬度.同时产生了新的功能需求:点击地图上的点,进行标记(mark)并且获取经纬度,下篇进行了记录

 

posted @   月下云生  阅读(5387)  评论(1编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
点击右上角即可分享
微信分享提示