百度地图搜索/定位

chenxin-code · chenxin-code · commit caa468122baa · 2024-06-26T10:03:09.000+08:00
diff --git a/src/component/baiduMap.vue b/src/component/baiduMap.vue
@@ -6,8 +6,8 @@
       append-to-body
       draggable
       destroy-on-close>
-    经纬度：[{{ lnglat }}]
-    <div id="container" style="width: 100%; height: 400px; background: #fafafa"/>
+    经纬度：[{{ lng + ',' + lat }}]
+    <div id="container" style="height: 400px"/>
   </el-dialog>
 </template>
 
@@ -19,39 +19,30 @@ const showDialog = ref(false);
 const dialogTitle = ref('');
 const lng = ref('');
 const lat = ref('');
-const lnglat = ref('');
-const initMap = (coord, address) => {
+const initMap = (address) => {
   showDialog.value = true;
   dialogTitle.value = address;
-  coord = coord ? coord : '116.404,39.915';
-  lnglat.value = coord;
-  if (coord) {
-    let arr = coord.split(',');
-    lng.value = arr[0];
-    lat.value = arr[1];
-    nextTick(() => {
-      const map = new BMapGL.Map('container');
-      map.enableScrollWheelZoom(true); //滚轮缩放
-      map.addControl(new BMapGL.CityListControl());  //添加城市列表控件
-      map.addControl(new BMapGL.ZoomControl());  //添加缩放控件
-      //创建地址解析器实例
-      const myGeo = new BMapGL.Geocoder();
-      //将地址解析结果显示在地图上，并调整地图视野
-      myGeo.getPoint(address, (point) => {
-        console.log('point', point);
-        if (point) {
-          map.centerAndZoom(point, 16);
-          //标注
-          map.addOverlay(new BMapGL.Marker(point, {title: address}));
-          lng.value = point.lng;
-          lat.value = point.lat;
-          lnglat.value = lng.value+','+ lat.value;
-        } else {
-          ElMessage.error('您选择的地址没有解析到结果！');
-        }
-      }, '北京市');
-    });
-  }
+  nextTick(() => {
+    const map = new BMapGL.Map('container');
+    map.enableScrollWheelZoom(true); //滚轮缩放
+    map.addControl(new BMapGL.CityListControl());  //添加城市列表控件
+    map.addControl(new BMapGL.ZoomControl());  //添加缩放控件
+    //创建地址解析器实例
+    const geocoder = new BMapGL.Geocoder();
+    //将地址解析结果显示在地图上，并调整地图视野
+    geocoder.getPoint(address, (point) => {
+      console.log('point', point);
+      if (point) {
+        lng.value = point.lng;
+        lat.value = point.lat;
+        map.centerAndZoom(point, 16);
+        //标注
+        map.addOverlay(new BMapGL.Marker(point, {title: address}));
+      } else {
+        ElMessage.error('您选择的地址没有解析到结果！');
+      }
+    }, '北京市');
+  });
 };
 
 defineExpose({initMap});
diff --git a/src/page/demo/baiduMap-search-locate.vue b/src/page/demo/baiduMap-search-locate.vue
@@ -48,7 +48,7 @@ const onAddress = () => {
   showBaiduMap.value = true;
   nextTick(() => {
     if (baiduMapRef.value) {
-      baiduMapRef.value.initMap(null, address.value);
+      baiduMapRef.value.initMap(address.value);
     }
   });
 };

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ const onAddress = () => {`
`48`	`48`	`showBaiduMap.value = true;`
`49`	`49`	`nextTick(() => {`
`50`	`50`	`if (baiduMapRef.value) {`
`51`		`- baiduMapRef.value.initMap(null, address.value);`
	`51`	`+ baiduMapRef.value.initMap(address.value);`
`52`	`52`	`}`
`53`	`53`	`});`
`54`	`54`	`};`