功能描述

一个在uni-app项目中使用的，发布为手机H5时使用的chooseLocation，基于百度地图

项目依赖

• 百度地图

适用场景

• HBuilderX 的uni-app项目，发布选项为手机H5
• 适合于微信公众号项目

演示项目运行

• git clone xxxx
• npm install
• 这是一个uniapp的工程，请在HBuilder X 中打开
• 点击菜单： 运行 > 运行到浏览器 > chrome

API说明

属性

• primaryColor，默认主色调，默认颜色为 #068888
• defaultPt，默认中心点位置，结构是这样的

{
	lng: 113.95996221592588,
	lat: 22.54938847345506
}

• defaultAddress，默认的地址字符串

事件

• cancel, 取消选择，无参数
• confirm, 选中了地图的位置，参数为百度地图的poi，结构大致是这样

{
	"title": "大冲都市花园",
	"uid": "883b68924077a2d24354d73a",
	"point": {
		"lng": 113.95996221592588,
		"lat": 22.54938847345506
	},
	"city": "深圳市",
	"_poiType": "房地产",
	"type": 0,
	"address": "广东省深圳市南山区粤海街道大冲社区铜鼓路55号",
	"postcode": null,
	"phoneNumber": null,
	"tags": ["房地产"],
	"selected": true
}

快速上手

• npm install uni-h5-bmap-chooselocation
• 在App.vue中加载百度地图

export default {
		onLaunch: function() {
			console.log('App Launch')
			this.loadBMapScript()
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods:{
			loadBMapScript() {
				var script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = 'https://api.map.baidu.com/api?type=webgl&v=2.0&ak=your-key&callback=init'
				document.body.appendChild(script);
			}
		}
	}

• 在需要的页面中引入组件 这里要注意的是，如果在app.vue中加载百度地图，由于地图加载需要一定的时间，如果马上自动加载地图，可能会出现BMapGL不存在的情况，此时地图库可能还没加载完

<button @click="onShowMap" v-if="!showMap">显示地图</button>
<bmapChooseLocatioin v-if="showMap" @cancel="onCancel" @confirm='onConfirm'></bmapChooseLocatioin>

import bmapChooseLocatioin from 'uni-h5-bmap-chooselocation'
	export default {
		components:{
			bmapChooseLocatioin
		},
		data() {
			return {
				showMap: false
			}
		},
		onLoad() {
		},
		methods: {
			onShowMap(){
				this.showMap = true
			},
			onConfirm(poi){
				console.log('onConfirm', poi)
			},
			onCancel(){
				console.log('onCancel')
			}
		}
	}