uniapp(安卓端)百度地图的使用

背景：

公司项目中有地图展示和定位功能，使用uniapp本以为应该很是容易，应该有现成的空间，去插件市场一找，大部分的插件都是针对H5的，对于app端很少，要不就是需要花钱，这才自己动手实现。

公司过去的项目使用的是百度地图，所以uniapp也就只能使用百度地图了，但是一看官方文档：就是没有百度地图。

在网上搜了一堆，需要使用使用到自定义基座，才能使用，那就只能通过自定义基座看看效果。

自定义基座

1.首先去百度地图开发者平台申请

这里主要是对安卓端进行操作（这里的包名和下边创建基座的包名一致）

2.申请后再Hbuilder中manifest.json 中配置

3.制作基座

切记：Android包名一定要和百度地图开发平台中的一致

编写代码

一、定位

1.创建获取定位的类fun.js

//获取位置信息

const getlocation = (opt) => {

        return new Promise((resolve, reject) => {

               uni.showLoading({

                title: '获取信息中'

                });

                uni.getLocation({

                    // map组件默认为国测局坐标gcj02，调用 uni.getLocation返回结果传递给组件时，需指定 type 为 gcj02

                    type: 'gcj02',

                    geocode: true,

                    success: function(data) {

                    resolve(data)

                    console.log(data)

                    },

                      fail: function(err) {

                        reject(err)

                },

                    complete() {

                            uni.hideLoading();

                        }

                })

            })

};

export default {

            getlocation: getlocation

}

2.主类main.js中引入

import App from './App'

import $ from '@/pages/index/fun.js'

// #ifndef VUE3

import Vue from 'vue'

Vue.prototype.$=$

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({

    ...App

})

app.$mount()

// #endif

// #ifdef VUE3

import { createSSRApp } from 'vue'

export function createApp() {

  const app = createSSRApp(App)

  return {

    app

  }

}

// #endif

3.需要的类中使用

onLoad() {

this.init()

},

methods: {

    init(){

        var t = this;

        t.$.getlocation().then(res => {

                console.log(res)

                t.latitude = res.latitude

                t.longitude = res.longitude

            }).catch(err => {

            console.log(err)

            })

        }

         }

输出结果：

二、地图展示

一开始的时候，我总是试图寻找百度地图是不是对uniapp这个平台有单独的API，但是很可惜没有。在百度地图引入后，直接调用uniapp给的map组件，可以展示出地图，但是很多的属性不支持，也找不到相关的处理文档。没办法，上网查找，大部分的处理方案是通过动态引入百度地图JavaScript API GL框架，进行展示。

    这个地方，我们需要在百度地图开发者平台申请web前端的开发的key

1.百度地图开发者控制平台，创建web端应用

2.创建动态引入百度地图的script类map.js

export function mymap(ak) {

  return new Promise(function(resolve, reject) {

    window.init = function() {

          resolve(mymap)

    }

    var script = document.createElement('script')

   script.type = 'text/javascript'

    script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`

    script.onerror = reject

    document.head.appendChild(script)

})

}

3.使用（这里使用到了renderjs），切记如果需要开文档，查看JavaScript API GL相关文档

4.运行效果

这样地图的定位和地图展示基本就完成了，如果需要更加复杂的功能只能去查看百度的官方文档