百度地图在Https协议的项目中不能访问
Vue项目开发中,要使用百度地图API SDK
需求1:获取当前城市名称;
需求2:获取当前城市坐标(经度,纬度)
方案:
① 在代码中引入 百度地图API SDK
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你百度开放平台申请的秘钥"></script>
在此需注意:引入sdk时使用的是 `http`协议的,项目上线使用的是`https`协议会到时地图不能使用,导致如下报错
解决方案:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你百度开放平台申请的秘钥"></script>
② 在项目中安装 `bmap` 依赖
npm intsall bmap --save
③ 在组件内写入如下方法,并调用
// 定位当前城市坐标 getCurrentCityCoordinates() { let geolocation = new BMap.Geolocation() //弹出地理授权 let that = this geolocation.getCurrentPosition( function(res) { console.log(res) if (this.getStatus() == BMAP_STATUS_SUCCESS) { that.$message.success({ content: '定位成功', }) that.center.lng = res.point.lng that.center.lat = res.point.lat } else { that.$message.error({ content: 'baidu return failed', }) } }, //获取失败时候的回调 function(res) { console.log(res) } ) },
在获取定位成功后,打印的 `console.log(r)` 结果如下,