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)