百度舆图定位

参考博主：vue3 Element plus 百度舆图封装（ 搜刮定位功能，拖拽回显功能）_vue3 pc端实现定位回显位置信息-CSDN博客
 运行情况：vue3+Ant Design
1，申请百度舆图ak
网址：百度舆图-百万开发者首选的舆图服务商,提供专属的行业办理方案
登录/注册后点击右上角控制台，点击左侧【应用管理】下的【我的应用】【创建应用】申请ak
2，index.html内引入

1. <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=申请的ak值&s=1"></script>

复制代码

3，画舆图

1. <template>
2.   <!-- 这个是我这个框架里封装好的弹窗组件 -->
3.   <BasicModal
4.     width="1200px"
5.     v-bind="$attrs"
6.     :defaultFullscreen="true"
7.     :canFullscreen="false"
8.     @register="registerModal"
9.     title="定位"
10.     @ok="handleSubmit"
11.   >
12.     <!-- ----地图相关--- -->
13.     <!-- 表单用于搜索 -->
14.     <a-form class="formdom">
15.       <a-form-item label="详细地址">
16.         <a-auto-complete
17.           v-model:value="mapData.address"
18.           placeholder="请输入详细地址"
19.           :backfill="true"
20.           :options="optionsAll"
21.           @search="querySearch"
22.           @select="handleSelect"
23.         >
24.           <template #option="item">
25.             <div>
26.               <div>{{ item.title }}</div>
27.               <span style="font-size: 12px; color: #b4b4b4">{{ item.address }}</span>
28.             </div>
29.           </template>
30.         </a-auto-complete>
31.       </a-form-item>
32.       <!-- 显示经纬度 -->
33.       <a-form-item label="经纬度">
34.         <a-input v-model:value="mapData.point" :disabled="true" />
35.       </a-form-item>
36.     </a-form>
37.     <!-- 画的地图 -->
38.     <div id="map" style="width: 100%; height: 100%"></div>
39.   </BasicModal>
40. </template>
41. <script lang="ts">
42.   import { defineComponent, ref } from 'vue';
43.   import { BasicModal, useModalInner } from '/@/components/Modal'; //框架自带的弹窗组件可忽略
44.   import { SearchOutlined } from '@ant-design/icons-vue'; //我用的是Ant Design组件库,这个是引入搜索图标
45.   export default defineComponent({
46.     name: 'AppModal',
47.     components: {
48.       BasicModal, //可忽略
49.     },
50.     emits: ['success'],
51.     setup(props, { emit }) {
52.       const isUpdate = ref(true); //可忽略
53.       // 初始经度,纬度
54.       const lat = ref(36.67411054692821);
55.       const lng = ref(117.10358591219932);
56.       // 搜索框下拉选项
57.       const optionsAll = ref([]);
58.       // 初始化地图
59.       let Map = null;
60.       // 初始图标
61.       let mk = null;
62.       // 地图缩放级别
63.       let zoom = 12;
64.       // 先定义一个全局变量后面用
65.       const BMap = window.BMap;
66.       // 坐标信息
67.       const mapData = ref({
68.         address: '', //详细地址
69.         point: '', //经纬度
70.         lat: '', //经度
71.         lng: '', //纬度
72.       });
73.       // 初始函数
74.       const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
75.         //我这一行引入的都是BasicModal弹窗组件封装好的与地图无关
76.         // 把值都清空
77.         mapData.value.address = '';
78.         mapData.value.point = '';
79.         mapData.value.lat = '';
80.         mapData.value.lng = '';
81.         if (data.isUpdate) {
82.           // 编辑-因为我这个是弹窗打开地图,可能是编辑可能是添加,也就坐标和地址回显
83.           lat.value = data.records.lat;
84.           lng.value = data.records.lng;
85.           mapData.value.lat = data.records.lat;
86.           mapData.value.lng = data.records.lng;
87.           mapData.value.address = data.records.address;
88.           mapData.value.point = data.records.lng + ',' + data.records.lat;
89.         }
90.         // 弹窗初始化
91.         setModalProps({ confirmLoading: false }); //与地图无关
92.         isUpdate.value = !!data?.isUpdate; //与地图无关
93.         //初始化地图 禁用地图默认点击弹框
94.         Map = new BMap.Map('map', { enableMapClick: false });
95.         var point = new BMap.Point(lng.value, lat.value);
96.         // 初始化 地图经纬度 层级12代表缩放zoom
97.         Map.centerAndZoom(point, zoom);
98.         Map.enableScrollWheelZoom(true); //滚动缩放
100.         //创建一个图像标注实例 启用拖拽 默认为false
101.         mk = new BMap.Marker(point, { enableDragging: true });
102.         // 图标图片尺寸设置
103.         mk.z.Bj.size.height = 100;
104.         mk.z.Bj.size.width = 100;
106.         Map.addOverlay(mk); //将覆盖物添加到地图中
107.         // 地图拖动事件
108.         Map.addEventListener('dragend', function (e) {
109.           Map.panTo(e.point); //将地图的中心点更改为给定的点
110.           getAddrByPoint(e.point); //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
111.         });
112.         // 图标拖动事件
113.         mk.addEventListener('dragend', function (e) {
114.           getAddrByPoint(e.point); //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
115.         });
116.       });
117.       // 逆解析函数
118.       async function getAddrByPoint(point) {
119.         var geco = new BMap.Geocoder();
120.         geco.getLocation(point, function (res) {
121.           mapData.value = {
122.             address: res.address,
123.             point: point.lng + ' , ' + point.lat,
124.             lat: point.lat,
125.             lng: point.lng,
126.           };
127.           mk.setPosition(point); //重新设置标注的地理坐标
128.           // Map.panTo(point); //将地图的中心点更改为给定的点
129.         });
130.       }
131.       // 搜索函数
132.       const querySearch = (str) => {
133.         var options = {
134.           //检索完成后的回调函数
135.           onSearchComplete: function (res) {
136.             var arr = [];
137.             if (local.getStatus() == BMAP_STATUS_SUCCESS) {
138.               for (var i = 0; i < res.getCurrentNumPois(); i++) {
139.                 arr.push(res.getPoi(i));
140.               }
141.             }
142.             //拿到数据之后回显给搜索框的下拉框
143.             optionsAll.value = arr;
144.             optionsAll.value.forEach((item) => {
145.               item.value = item.address;
146.             });
147.           },
148.         };
149.         var local = new BMap.LocalSearch(Map, options);
150.         local.search(str);
151.       };
152.       // 搜索框的下拉框,选中某项会触发的-选择函数
153.       const handleSelect = (val, options) => {
154.         // 保存当前数据
155.         mapData.value = {
156.           address: options.address,
157.           point: options.point.lng + ' , ' + options.point.lat,
158.           lat: options.point.lat,
159.           lng: options.point.lng,
160.         };
161.         mk.setPosition(options.point); //重新设置标注的地理坐标
162.         Map.panTo(options.point); //将地图的中心点更改为给定的点
163.       };
164.       // 弹窗保存--把值传回去
165.       async function handleSubmit() {
166.         const latlng = {
167.           lat: mapData.value.lat,
168.           lng: mapData.value.lng,
169.         };
170.         emit('success', {
171.           positonStr: mapData.value.address,
172.           latlng: latlng,
173.         });
174.         closeModal();
175.       }
176.       return {
177.         registerModal,
178.         handleSubmit,
179.         handleSelect,
180.         querySearch,
181.         mapData,
182.         optionsAll,
183.         SearchOutlined,
184.       };
185.     },
186.   });
187. </script>
188. <style scoped lang="scss">
189.   .formdom {
190.     position: absolute;
191.     top: 0;
192.     background-color: #fff;
193.     z-index: 10;
194.     display: flex;
195.     justify-content: space-evenly;
196.     align-items: center;
197.     width: 100%;
198.     ::v-deep(.ant-row) {
199.       width: 30%;
200.     }
201.   }
202. </style>

复制代码

4，大概报错，我在本地跑的时间是正常的，但是放到线上之后就有题目了“报错BMap is not defined”而且舆图是空缺的，过细的话在最开始还会有下面这张图上的错误，查了一下办理办法就是在index.html引入的时间在末端加上&s=1由于我最开始是http为了以防万一我也改成https了