vue3和百度地图关键字检索 定位 点击定位

效果图

在index.html中引入

百度地图开放平台  去申请你的ak 非常的简单可以自己百度 一下

1
2
3
4
5
<!-- 这个用官网给的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxx 换为这个就没有那么多 报错了 -->
<script
  type="text/javascript"
  src="https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" // 这个替换为你自己申请的ak
></script>

 创建一个组件

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<template>
  <div style="width: 100%; height: 440px;">
    <!-- 显示小地址小框框 -->
    <div class="ipt">
      <div class="address">
        {{ address }}
      </div>
      <!-- 支持模糊查询 -->
      <input type="text" id="suggestId" placeholder="搜索地名" />
    </div>
    <!-- 地图 -->
    <div id="map" :style="{ width: '100%', height: 400 + 'px' }">
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { onMounted, defineProps, ref, defineEmits } from 'vue'
// 传入的中心点 刷新页面加载的点
const props = defineProps({
  latitude: {
    type: String,
    default: () => {
      return '40.083402'
    },
  },
  longitude: {
    type: String,
    default: () => {
      return '113.368374'
    },
  }
})
// 传出地址
const emits = defineEmits(['addressData'])
// 显示地址
const address = ref('')
// 引入的地图的api
const BMap = (window as any).BMap
onMounted(() => {
  // 创建地图实例
  var map = new BMap.Map('map')
  // 这个创建地理服务的 下面是把定位转换为详细文字地址
  var geoc = new BMap.Geocoder();
  //建立一个自动完成的对象 主要关键字查询
  var ac = new BMap.Autocomplete(
    {
      // suggestId 是输入框id
      "input": "suggestId"
      //  这个是地图实例
      , "location": map
    });
  // 下拉列表里的内容确认发生的事件 ()
  ac.addEventListener('onconfirm', function (e: any) {
    // 把城市啥的拼接起来
    const myValue =
      e.item.value.province +
      e.item.value.city +
      e.item.value.district +
      e.item.value.street +
      e.item.value.business
    // 搜索
    // 搜索结束执行的函数
    const mySearchFun = () => {
      // 传入定位函数的经纬度
      getAddOverlay(local.getResults().getPoi(0).point, true)
    }
    // 创建一个搜索的实例
    var local = new BMap.LocalSearch(map, {
      //搜索成功后的回调
      onSearchComplete: mySearchFun,
    })
    // 传入搜索位置的关键字
    local.search(myValue)
  })
 
  // 下面是开始定位的
  var point = new BMap.Point(props.longitude, props.latitude) // 定位
  getAddOverlay(point, true)
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  // 当地图点击的时候发生的事件
  map.addEventListener('click', function (e: any) {
    // 创建标点
    getAddOverlay(new BMap.Point(e.point.lng, e.point.lat))
  })
  // 定位点的函数 
  function getAddOverlay(point: any, centerAndZoom: boolean = false) {
    // 清空地图上所有的标准当然你想要多个点的话可以不清除
    map.clearOverlays()
    var marker = new BMap.Marker(point);        // 创建标注   
    map.addOverlay(marker); // 添加到地图
 
    centerAndZoom && map.centerAndZoom(point, 15) // 中心点位 15是级别
 
    // 把定位转换为详细文字地址 
    geoc.getLocation(point, (rs: any) => {
      // 显示到页面上
      address.value = rs.address
    })
    // 把位置传出
    emits('addressData', point)
  }
})
 
</script>
 
 
<style lang="scss" >
.anchorBL {
  display: none;
}
</style>
<style lang="scss"  scoped>
.ipt {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 300px;
  height: 25px;
  margin-bottom: 10px;
 
  #suggestId {
    width: 40%;
    min-width: 250px;
    padding: 5px 10px;
    outline: none;
    font-size: 13px;
    font-family: monospace;
    color: #606266;
    border-radius: 4px;
    border: 1px solid #ddd;
  }
 
  .address {
    position: absolute;
    width: 300px;
    height: 20px;
    font-size: 12px;
    left: 0;
    bottom: 0;
  }
}
</style>

  

在父组件引入

1
<center-map @addressData="addressData" :latitude="latitude" :longitude="longitude"></center-map>

  

posted @   乔木滴滴  阅读(799)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示