uni app +vue 引用 百度地图API取位置,VUE用百度地图获取当前位置(城市)

案头见蠹鱼,犹胜凡俦侣。这篇文章主要讲述uni app +vue 引用 百度地图API取位置,VUE用百度地图获取当前位置(城市)相关的知识,希望能为你提供帮助。
uni app +vue 引用 百度地图API取位置,VUE用百度地图获取当前位置(城市)   1.在index.html  引入  百度js < script  src="http://img.readke.com/220507/0216303231-0.jpg ak=你的密钥" type="text/javascript"> < /script>   2.创建js文件,放入以下代码:  

export default { init: function () { const AK = "lyFvtNiZ2fH1jWqGIRMAxDwDbMwvXgsv"; 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); }); } }

3.需要用的组件里开始引用和调用
写在方法里,在mounted里调用– 下面代码不可少
mounted() { var isWeixn = this.is_weixn(); if (isWeixn) { this.getCity(); } }, methods: { getCity() { map.init().then(BMap => { const locationCity = new BMap.Geolocation(); var that = this; locationCity.getCurrentPosition( functiongetinfo(options){ let city = options.address.city; //此处拿到位置相关信息 that.LocationCity = city; console.log(options) }, function (e){ that.LocationCity = ‘定位失败‘; console.log(‘定位失败‘) }, {provider: ‘baidu‘} ) }) }, }

【uni app +vue 引用 百度地图API取位置,VUE用百度地图获取当前位置(城市)】 

    推荐阅读