uniapp 小程序中百度地图的使用,通过地址获取经纬度，导航至该地址 --详细 2024

颍小淮_2018

已于 2024-09-03 10:25:19 修改

阅读量957

点赞数 2

文章标签： uni-app 小程序

于 2024-09-03 10:24:04 首次发布

本文链接：https://blog.csdn.net/weixin_71045874/article/details/141853396

版权

场景：接口返回一个地址如（北京市天安门），点击导航，调用地图，导航至该地点。

实现方法：

第一步：登录百度地图开放平台申请百度ak ,https://lbsyun.baidu.com/（没有账号则先去创建一个百度账号）

第二步，进入百度地图开放平台控制台（导航栏“控制台”），点击“应用管理”-“我的应用”，创建应用。

4、下载百度地图微信小程序JavaScript API

下载链接:微信小程序JavaScript API - 配置环境 | 百度地图API SDK

下载百度地图微信小程序JavaScript API，解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js )，将其拷贝到static/js目录下

5.引入和使用

<template>
    <view class="content">
        <text class="map" @tap="showMap">查看地图</text>
    </view>
</template>
<script src="/static/js/bmap-wx.min.js"></script>
<script>
  // 引入百度地图API
  const bmap = require('../static/js/bmap-wx.min.js');
  const BMapWX = bmap.BMapWX;
//    这个地方是你在百度地图中申请的ak
  var BMap = new BMapWX({ak:你申请的ak	});
  export default {
    components: {
      nodata
    },
    data() {
      info: {},
    },
    onShow() {
      this.getData()
    },
    methods: {
        getData(){
          let address = '北京市天安门广场'
          BMap.geocoding({ 
              address: address , 
              fail(res){ console.log(res) }, 
              success(res){
                 that.info.latitude = res.result.location.lat;
                 that.info.longitude = res.result.location.lng;
                 console.log(res.result.location.lng,'jingdu')
                 console.log(res.result.location.lat,'weidu')
              }, 
         }); 
      },
       showMap() {
        let that = this;
        // 打开系统位置地图
        uni.openLocation({
              latitude:parseFloat(that.info.latitude),
              longitude:parseFloat( that.info.longitude),
              name: that.info.address,
              success:function (res) {
                  console.log('打开系统位置地图成功')
              },
              fail:function (error) {
                  console.log(error)
              }
          })
      }
    }
  }

6.效果