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相关文档

<script module=”map” lang=”renderjs”>

import { mymap } from “@/util/map.js”;

var bmap = null;

export default {

    data() {

            return {

                    ak: GENh3FYgBTQm1Zrml3SMwcBSNkWz5mgG

                }

        },

mounted() {

// ================百度地图==================

            mymap(this.ak).then((mymap) => {

            // 创建百度地图实例

            bmap = new BMapGL.Map(“allmap”);

            console.log(bmap, this.map )

          var point = new BMapGL.Point(116.404, 39.915);

            bmap.centerAndZoom(point, 20); //设置缩放级别

            bmap.setTilt(43);//设置倾斜角度

            bmap.setHeading(24.5);  //设置地图旋转角度

            bmap.enableScrollWheelZoom();

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件

            bmap.addControl(scaleCtrl);

            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件

            bmap.addControl(zoomCtrl);

            var point = new BMapGL.Point(116.404, 39.915);

            var marker = new BMapGL.Marker(point);        // 创建标注 

            bmap.addOverlay(marker);

            var polyline = new BMapGL.Polyline([

            new BMapGL.Point(116.399, 39.910),

            new BMapGL.Point(116.405, 39.920),

            new BMapGL.Point(116.425, 39.900)

            ], {strokeColor:”blue”, strokeWeight:2, strokeOpacity:0.5});

            bmap.addOverlay(polyline);

        });

},

    methods: {

            }

}

</script>

4.运行效果

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