vue使用百度地图记录

最新推荐文章于 2025-07-08 10:28:26 发布

Revival_Liang

最新推荐文章于 2025-07-08 10:28:26 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web vue

本文链接：https://blog.youkuaiyun.com/Revival_Liang/article/details/77872107

web 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文档介绍如何在Vue项目中集成并使用百度地图，通过在HTML中引入API并设置AK来实现地图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div class="home_map">
<section>
	<div class="map" id="allmap"></div>
</section>
	<footer>
		<div class="info fb">
			<div class="child">
				<p class="left_text">
				<em>{{streetNumber?streetNumber:''}}</em>
				<span>{{address?address:''}}</span>
				</p>
				<img src="../../../static/imgs/home_map.jpg">
			</div>
		</div>
	</footer>
</div>
</template>
<style scoped lang='scss'>
 @import '../../styles/commonscss.scss';
	.home_map .map{width: 100vw;height:100vh; position: fixed;}
	.home_map .info{width: 100%; height: 5.4rem;padding-top: 0.85rem;z-index: 100; background-color: white;img{width: 2.95rem;height: 2.95rem;}} 
	.home_map .left_text{width: 15.2rem;padding-top:0.3rem; display: inline-block;text-align: center; vertical-align: top; em{margin-bottom: 0.25rem; font-size: 0.8rem;font-weight: bold;display: block;}span{color:$lg;}}
</style>
<script type="text/babel">
import {host,my_log} from '@/config/config'
	export default{
		data(){
			return{
				address:null,
				streetNumber:null
			}
		},
		created:function(){

		},
		mounted:function(){
			this.init()
		},
		methods:{
			init:function(){
				var _this = this
				// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(113.335535,22.99421);
	map.centerAndZoom(point,15);
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(point);
			map.addOverlay(mk);
			map.panTo(point);

		var geoc = new BMap.Geocoder();     
		geoc.getLocation(point, (rs)=>{
			var addComp = rs.addressComponents;
			// 所有位置信息都在rs.addressComponents里面，坐标要有标志性的坐标信息才会全
			my_log(rs.addressComponents)
			_this.address = addComp.province + addComp.city + addComp.district  + addComp.street
			_this.streetNumber = addComp.street + addComp.streetNumber
			if(_this.streetNumber == '')
				_this.streetNumber = '获取不到具体位置'
			console.log(_this.streetNumber)
		});  

		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
	//关于状态码
	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)      
			}
		}
	}
</script>

最后在html引入ak在百度地图开放平台获取

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EVEOIF80XN5tuPoetNZOFxNHlTKUgNVs"></script>