背景：
公司項(xiàng)目中有地圖展示和定位功能，使用uniapp本以為應(yīng)該很是容易，應(yīng)該有現(xiàn)成的空間，去插件市場(chǎng)一找，大部分的插件都是針對(duì)H5的，對(duì)于app端很少，要不就是需要花錢，這才自己動(dòng)手實(shí)現(xiàn)。
公司過去的項(xiàng)目使用的是百度地圖，所以u(píng)niapp也就只能使用百度地圖了，但是一看官方文檔：就是沒有百度地圖。
在網(wǎng)上搜了一堆，需要使用使用到自定義基座，才能使用，那就只能通過自定義基座看看效果。
自定義基座
1.首先去百度地圖開發(fā)者平臺(tái)申請(qǐng)
這里主要是對(duì)安卓端進(jìn)行操作（這里的包名和下邊創(chuàng)建基座的包名一致）
2.申請(qǐng)后再Hbuilder中manifest.json 中配置
3.制作基座
切記：Android包名一定要和百度地圖開發(fā)平臺(tái)中的一致
編寫代碼
一、定位
1.創(chuàng)建獲取定位的類fun.js
//獲取位置信息
const getlocation = (opt) => {
????????return new Promise((resolve, reject) => {
???????????????uni.showLoading({
????????????????title: '獲取信息中'
????????????????});
????????????????uni.getLocation({
????????????????????// map組件默認(rèn)為國測(cè)局坐標(biāo)gcj02，調(diào)用 uni.getLocation返回結(jié)果傳遞給組件時(shí)，需指定 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)
????????????})
????????}
? ? ? ? ?}
輸出結(jié)果：
二、地圖展示
一開始的時(shí)候，我總是試圖尋找百度地圖是不是對(duì)uniapp這個(gè)平臺(tái)有單獨(dú)的API，但是很可惜沒有。在百度地圖引入后，直接調(diào)用uniapp給的map組件，可以展示出地圖，但是很多的屬性不支持，也找不到相關(guān)的處理文檔。沒辦法，上網(wǎng)查找，大部分的處理方案是通過動(dòng)態(tài)引入百度地圖JavaScript API GL框架，進(jìn)行展示。
? ? 這個(gè)地方，我們需要在百度地圖開發(fā)者平臺(tái)申請(qǐng)web前端的開發(fā)的key
1.百度地圖開發(fā)者控制平臺(tái)，創(chuàng)建web端應(yīng)用
2.創(chuàng)建動(dòng)態(tài)引入百度地圖的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相關(guān)文檔
<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) => {
????????????// 創(chuàng)建百度地圖實(shí)例
????????????bmap = new BMapGL.Map("allmap");
????????????console.log(bmap, 'this.map ')
??????????var point = new BMapGL.Point(116.404, 39.915);
????????????bmap.centerAndZoom(point, 20); //設(shè)置縮放級(jí)別
????????????bmap.setTilt(43);//設(shè)置傾斜角度
????????????bmap.setHeading(24.5);? //設(shè)置地圖旋轉(zhuǎn)角度
????????????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);? ? ? ? // 創(chuàng)建標(biāo)注?
????????????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.運(yùn)行效果
這樣地圖的定位和地圖展示基本就完成了，如果需要更加復(fù)雜的功能只能去查看百度的官方文檔
