简单说明:我只在pc端使用过百度地图,uniapp中使用纯属是小试牛刀,应该都属是一样的,请耐心观看
看前必读
最近才有空抽出时间来看这个地图问题,我已发布新的方式去实现地图展示, 该文章目前存在兼容问题
请大家移步: uniapp使用百度地图(一)
一、简单使用并展示地图
1. 在你的项目中util下建一个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 =
`http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&mcode=35:81:1C:D3:2A:63:FB:6B:6E:1C:D4:F7:81:DF:A5:1B:89:57:83:91;uni.UNI342DC80&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
2. 接着我们单独简历一个组件出来用来放置我们的地图
<template>
<view class="global">
<view id="allmap" class="map"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<script type="module">
import {
mymap
} from "@/util/map.js";
var bmap = null;
export default {
data() {
return {
ak: '你的key值'
}
},
mounted() {
// ================百度地图==================
mymap(this.ak).then((mymap) => {
// 创建百度地图实例
bmap = new BMapGL.Map("allmap");
console.log(bmap, 'this.map ')
let point = new BMapGL.Point(108.953364, 34.276184);
bmap.centerAndZoom(point, 10); //设置缩放级别
bmap.enableScrollWheelZoom();
});
},
}
</script>
<style>
<style lang="scss"scoped>.map {
width: 100%;
height: 500px;
}
.global {
width: 100%;
height: 100%;
}
#allmap {
width: 100%;
height: 100%;
}
</style>
3.然后地图就展示出来了
二、体验地图的魅力
1. 添加一个简单的东西上去
mounted() {
// ================百度地图==================
mymap(this.ak).then((mymap) => {
// 创建百度地图实例
bmap = new BMapGL.Map("allmap");
console.log(bmap, 'this.map ')
let point = new BMapGL.Point(108.953364, 34.276184);
bmap.centerAndZoom(point, 10); //设置缩放级别
bmap.enableScrollWheelZoom();
let marker = new BMapGL.Marker(point); // 创建标注
bmap.addOverlay(marker);
let myIcon = new BMapGL.Icon("../../static/logo.png", new BMapGL.Size(42, 42), {
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// // 创建标注对象并添加到地图
let marker1 = new BMapGL.Marker(point, {
icon: myIcon
});
bmap.addOverlay(marker1); // 将标注添加到地图中
let polyline = new BMapGL.Polyline([
new BMapGL.Point(108.921366, 34.190371),
new BMapGL.Point(108.930031, 34.24932),
new BMapGL.Point(108.932879, 34.249476)
], {
strokeColor: "blue",
strokeWeight: 4,
strokeOpacity: 0.5
});
bmap.addOverlay(polyline);
const labelEnd = new BMapGL.Label('终点', { //设置起点文字内容
position: new BMapGL.Point(108.932879, 34.249476),
offset: new BMapGL.Size(0, 0),
});
labelEnd.setStyle({ //设置起点文字样式
color: "#fff",
backgroundColor: "#396DFF",
borderRadius: "10px",
padding: "2px 6px",
border: "0",
});
bmap.addOverlay(labelEnd); // 添加覆盖物
const label = new BMapGL.Label('起点', {
position: new BMapGL.Point(108.921366, 34.190371),
offset: new BMapGL.Size(0, 0),
});
label.setStyle({
color: "#fff",
backgroundColor: "#396DFF",
borderRadius: "10px",
padding: "2px 6px",
border: "0",
});
bmap.addOverlay(label);
});
},
结果:添加了一个自定的标注点,以及一个普通的标注点,以及一段轨迹路线,并设置了起点和终点
2. 添加信息窗口进去
const label = new BMapGL.Label('起点', {
position: new BMapGL.Point(108.921366, 34.190371),
offset: new BMapGL.Size(0, 0),
});
label.addEventListener("click", function(e) { //点击触发
let opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "定制版" // 信息窗口标题
}
let infoWindow = new BMapGL.InfoWindow("你好鸭,我在起点", opts); // 创建信息窗口对象
bmap.openInfoWindow(infoWindow, e.target.latLng);
});
效果图:
3. 通过浏览器获取当前经纬度
1. 浏览器定位
let geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMapGL.Marker(r.point);
bmap.addOverlay(mk);
bmap.panTo(r.point);
alert('您的位置:' + r.point.lng + ',' + r.point.lat);
} else {
alert('failed' + this.getStatus());
}
});
2. IP定位
function myFun(result) {
var cityName = result.name;
bmap.setCenter(cityName);
alert("当前定位城市:" + cityName);
}
var myCity = new BMapGL.LocalCity();
myCity.get(myFun)
在这里插入代码片
#####3 .
let geolocation = new BMapGL.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMapGL.Marker(r.point);
bmap.addOverlay(mk);
bmap.panTo(r.point);
alert('您的位置:' + r.point.lng + ',' + r.point.lat);
} else {
alert('failed' + this.getStatus());
}
});
好了,暂时就这些基础的基本用法,后期再出高级的
完结撒花