百度地图申请地址：控制台 | 百度地图开放平台
效果：
1.后台
1.1申请百度地图APi
1.2 引入百度地图
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己百度生气apikey"></script>1.3 v2组件
bash
<template>
<div>
<!-- 地图容器 -->
<div id="map-container" class="map-container"></div>
<!-- 结果展示区域 -->
<div class="result">
搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input>
<el-button type="primary" size="small" @click="searchAddress">搜索</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyMap: '',
map: null,
marker: null,
geoc: null
};
},
methods: {
updatePositionAndAddress(point) {
this.$emit('update:marker-position', {
lat: point.lat,
lng: point.lng
});
this.geoc.getLocation(point, (rs) => {
if (rs) {
this.$emit('update:address', rs.address);
}
});
},
handleMapClick(e) {
if (this.marker) {
this.map.removeOverlay(this.marker);
}
this.marker = new BMap.Marker(e.point);
this.map.addOverlay(this.marker);
this.updatePositionAndAddress(e.point);
},
searchAddress() {
if (!this.keyMap) return;
const local = new BMap.LocalSearch(this.map, {
renderOptions: { map: this.map },
onSearchComplete: (results) => {
if (results.getNumPois()) {
const firstResult = results.getPoi(0);
const point = firstResult.point;
if (this.marker) {
this.map.removeOverlay(this.marker);
}
this.marker = new BMap.Marker(point);
this.map.addOverlay(this.marker);
this.map.centerAndZoom(point, 15);
this.updatePositionAndAddress(point);
}
}
});
local.search(this.keyMap);
}
},
mounted() {
if (!window.BMap) {
console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接');
return;
}
this.map = new BMap.Map('map-container');
this.map.centerAndZoom(new BMap.Point(102.755, 25.134), 13);
this.map.enableScrollWheelZoom();
this.geoc = new BMap.Geocoder();
this.map.addEventListener('click', this.handleMapClick);
}
};
</script>
<style scoped>
.map-container {
width: 600px;
height: 500px;
}
.result {
margin-top: 10px;
font-size: 14px;
}
</style>1.4 v3组件
bash
<template>
<div>
<!-- 地图容器 -->
<div id="map-container" class="map-container"></div>
<!-- 结果展示区域 -->
<div class="result">
搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input>
<el-button type="primary" size="small" @click="searchAddress">搜索</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const emit = defineEmits(['update:marker-position', 'update:address'])
// 定义响应式数据
const keyMap = ref('')
let map: any = null
let marker: any = null
let geoc: any = null
// 更新标记位置和地址的函数
const updatePositionAndAddress = (point: any) => {
// 发送位置更新事件
emit('update:marker-position', {
lat: point.lat,
lng: point.lng
})
// 反向地理编码获取详细地址
geoc.getLocation(point, (rs: any) => {
if (rs) {
emit('update:address', rs.address)
}
})
}
// 处理地图点击事件
const handleMapClick = (e: any) => {
// 如果已有标注，则先移除
if (marker) {
map.removeOverlay(marker)
}
// 创建新的标注
marker = new BMap.Marker(e.point)
map.addOverlay(marker)
// 更新位置和地址
updatePositionAndAddress(e.point)
}
// 搜索地址
const searchAddress = () => {
if (!keyMap.value) return
// 创建地址搜索实例
const local = new BMap.LocalSearch(map, {
renderOptions: { map: map },
onSearchComplete: (results: any) => {
if (results.getNumPois()) {
const firstResult = results.getPoi(0)
const point = firstResult.point
// 移除旧标记
if (marker) {
map.removeOverlay(marker)
}
// 添加新标记
marker = new BMap.Marker(point)
map.addOverlay(marker)
map.centerAndZoom(point, 15)
// 更新位置和地址
updatePositionAndAddress(point)
}
}
})
local.search(keyMap.value)
}
// 初始化地图
onMounted(() => {
const BMap = window.BMap
if (!BMap) {
console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接')
return
}
// 初始化地图
map = new BMap.Map('map-container')
map.centerAndZoom(new BMap.Point(102.755, 25.134), 13)
map.enableScrollWheelZoom()
// 初始化地理编码器
geoc = new BMap.Geocoder()
// 添加点击事件监听
map.addEventListener('click', handleMapClick)
})
</script>
<style scoped>
/* 样式部分 */
.map-container {
width:600px;
height: 500px;
}
.result {
margin-top: 10px;
font-size: 14px;
}
</style>1.5 使用
bash
#需要完成源码加vx a2411286970a
<BaiduMap ref="mapRef"
@update:marker-position="handleMarkerPositionUpdate"
@update:address="handleAddressUpdate"></BaiduMap>
bash
#需要完成源码加vx a2411286970a
handleMarkerPositionUpdate(position){
console.log(position);
this.ruleForm.latitude=position.lat
this.ruleForm.longitude=position.lng
},
2.uinapp
我们在后台进行位置获取后，在前台微信小程序及可进回显导航即可！
bash
// 导航功能
onNavigateTap() {
// 检查是否有地址信息
if (!this.detail.jingdiandizhi) {
this.$utils.msg('暂无地址信息');
return;
}
let _this = this;
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 用户已授权，获取当前位置
uni.getLocation({
type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
success: (res) => {
const latitude = res.latitude;
const longitude = res.longitude;
// 使用当前位置打开地图
uni.openLocation({
latitude: parseFloat(this.detail.latitude),
longitude:parseFloat(this.detail.longitude),
name: this.detail.jingdianmingcheng,
address: this.detail.jingdiandizhi,
scale: 18,
success: function() {
console.log('成功打开位置');
},
fail: function(err) {
console.error('打开位置失败', err);
}
});
},
fail: function(err) {
console.error('获取位置失败', err);
}
});
},
fail: () => {
// 用户未授权
uni.showModal({
title: '提示',
content: '需要获取您的位置权限，请前往设置开启。',
success: (res) => {
if (res.confirm) {
uni.openSetting();
}
}
});
}
});
// // 打开地图导航
// uni.openLocation({
// latitude: 0, // 这里需要替换为实际的经纬度
// longitude: 0, // 这里需要替换为实际的经纬度
// name: this.detail.jingdianmingcheng,
// address: this.detail.jingdiandizhi,
// success: function() {
// console.log('导航成功');
// },
// fail: function(err) {
// console.log('导航失败', err);
// // 如果没有经纬度，可以使用复制地址的方式
// uni.setClipboardData({
// data: this.detail.jingdiandizhi,
// success: function() {
// uni.showToast({
// title: '地址已复制，请打开地图APP进行导航',
// icon: 'none'
// });
// }
// });
// }
// });
},
