【横川咨询】vue手机h5页面获取经纬度信息（通过百度地图）

横川咨询

已于 2024-11-28 10:02:11 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：喵了个咪 web 物联网文章标签： vue.js 百度前端

于 2021-05-31 16:50:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38187437/article/details/117420787

web 同时被 3 个专栏收录

28 篇文章

订阅专栏

物联网

4 篇文章

订阅专栏

喵了个咪

1 篇文章

订阅专栏

该博客介绍了如何在Vue项目中安装和使用百度地图组件，包括在main.js中引入，设置AK，以及在index.html中加载API。同时，展示了如何异步加载地图并获取当前城市及经纬度的方法，强调项目必须部署在HTTPS环境下运行。

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

安装百度地图组件

npm install vue-baidu-map --save

vue项目使用百度地图

在main.js文件中加入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap,{

ak:'XXXXXXXXXX'//自己去百度API申请，免费的

})

index.html页面中加入

创建main.js

export default {
    init: function () {
        const AK = "XXXXXXXXXXXXXX";
        const BMap_URL = 'https://api.map.baidu.com/api?v=2.0&ak=' + AK + "&s=1&callback=onBMapCallback";
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== "undefined") {
                resolve(BMap);
                return true;
            }
            // 百度地图异步加载回调处理
            window.onBMapCallback = function () {
                resolve(BMap);
            };
            let getCurrentCityName = function () {
                return new Promise(function (resolve, reject) {
                    let myCity = new BMap.LocalCity()
                    myCity.get(function (result) {
                        resolve(result.name)
                    })
                })
            }
            // 插入script脚本
            let scriptNode = document.createElement('script');
            scriptNode.setAttribute('type', 'text/javascript');
            scriptNode.setAttribute('src', BMap_URL);
            document.body.appendChild(scriptNode);
        });
    }
}

vue获取经纬度页面

<template>
  <div class="testAddr">
  </div>
</template>
<script>
import map from 'map.js' //根据位置引入js
export default {
  name: 'testAddr', // 反馈建议
  created() {
    this.getAddrTest();
  },
  methods: {
    //测试获取经纬度
    getAddrTest(){
      alert(1)
      map.init().then(BMap =>{
				const locationCity = new BMap.Geolocation();
				var that = this;
				locationCity.getCurrentPosition(
					function getinfo(options){
						let city = options.address.city;
						that.LocationCity = city;
						console.log(options)
						alert(city)
						alert(`${options.latitude}` + `  ` +`${options.longitude}`)
						alert(`${options.point.lng}` + `  ` +`${options.point.lat}`)
					},
					function (e){
						that.LocationCity = '定位失败';
						console.log('定位失败')
					},
					{provider:'baidu'}
					)
			})

    },
    
  },
};
</script>

项目必须部署到服务器，并且通过https访问！！！！重点！！！https！