背景：
公司项目中有地图展示和定位功能，使用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.运行效果
这样地图的定位和地图展示基本就完成了，如果需要更加复杂的功能只能去查看百度的官方文档
网友评论