### 功能描述
一个在uni-app项目中使用的，发布为手机H5时使用的chooseLocation，基于百度地图
![界面截图](https://gitee.com/sailimuhu/uni-h5-bmap-chooselocation/raw/master/static/chooselocation.png)
![界面交互](https://gitee.com/sailimuhu/uni-h5-bmap-chooselocation/raw/master/static/chooselocation.gif)

### 项目依赖
- 百度地图

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

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

### API说明
#### 属性
- `primaryColor`，默认主色调，默认颜色为 #068888
- `defaultPt`，默认中心点位置，结构是这样的
```js
{
	lng: 113.95996221592588,
	lat: 22.54938847345506
}
```
- `defaultAddress`，默认的地址字符串

#### 事件
- `cancel`, 取消选择，无参数
- `confirm`, 选中了地图的位置，参数为百度地图的poi，结构大致是这样
```js
{
	"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`中加载百度地图
```js
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不存在的情况，此时地图库可能还没加载完
```html
<button @click="onShowMap" v-if="!showMap">显示地图</button>
<bmapChooseLocatioin v-if="showMap" @cancel="onCancel" @confirm='onConfirm'></bmapChooseLocatioin>
```
```js
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')
			}
		}
	}
```