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.运行效果

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,048评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,330评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,541评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,042评论 0 176
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,821评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,795评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,413评论 2 271
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,173评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,994评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,525评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,327评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,648评论 1 230
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,248评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,142评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,521评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,622评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,025评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,543评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,636评论 2 231

推荐阅读更多精彩内容