uni-h5-bmap-chooselocation
Version:
一个在uniapp中使用的，用于H5项目的，基于百度地图的chooseLocation组件
110 lines (103 loc) • 2.92 kB
Markdown
### 功能描述
一个在uni-app项目中使用的，发布为手机H5时使用的chooseLocation，基于百度地图
### 项目依赖
- 百度地图
### 适用场景
- 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')
}
}
}
```