mirror of https://gitee.com/xiaonuobase/snowy
【更新】地图容器高度 调整为 props属性，默认800
这么诚实
小诺
parent
48a175ea3d
commit
a396426aa5
|
|
@ -7,8 +7,13 @@ BMap
|
|||
|
||||
### 使用方式
|
||||
|
||||
```vue
|
||||
```text
|
||||
申请key
|
||||
```
|
||||
|
||||
访问 [百度地图官网](https://lbsyun.baidu.com/apiconsole/center#/home) 注册账号，申请应用获得key
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<baidu-map ref="map" api-key="******" @complete="handleComplete"
|
||||
@marker-click="handleMarkerClick" />
|
||||
|
|
@ -48,17 +53,18 @@ BMap
|
|||
|
||||
### Prop属性
|
||||
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
|---------------|--------------|--------|------|
|
||||
| mid | 容器ID | String | 时间戳 |
|
||||
| apiKey | 地图Key | String | |
|
||||
| center | 地图中心点 | String | 自动定位 |
|
||||
| plugins | 地图控件 | Array | |
|
||||
| viewMode | 效果：2D，3D | String | 3D |
|
||||
| rotationAngle | 旋转角度 | Number | 60 |
|
||||
| tiltAngle | 倾斜角度 | Number | 70 |
|
||||
| zoom | 地图缩放比例 | Number | 12 |
|
||||
| mapStyle | 地图样式：个性化地图 | String | |
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
|---------------|------------|--------|----------|
|
||||
| mid | 容器ID | String | 时间戳 |
|
||||
| height | 容器高度 | Number | 800，单位px |
|
||||
| apiKey | 地图Key | String | |
|
||||
| center | 地图中心点 | String | 自动定位 |
|
||||
| plugins | 地图控件 | Array | |
|
||||
| viewMode | 效果：2D，3D | String | 3D |
|
||||
| rotationAngle | 旋转角度 | Number | 60 |
|
||||
| tiltAngle | 倾斜角度 | Number | 70 |
|
||||
| zoom | 地图缩放比例 | Number | 12 |
|
||||
| mapStyle | 地图样式：个性化地图 | String | |
|
||||
|
||||
#### 地图控件
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.7 KiB |
|
|
@ -1,16 +1,21 @@
|
|||
<template>
|
||||
<div class="baiduMap">
|
||||
<div class="baiduMap" :style="{height: `${height}px`}">
|
||||
<div :id="`container-${mid}`" style="width: 100%; height: 100%">地图资源加载中...</div>
|
||||
</div>
|
||||
</template>
|
||||
<!--BMapGL官网：https://lbsyun.baidu.com/index.php?title=jspopularGL-->
|
||||
<script setup name="baiduMap">
|
||||
import { onMounted, onUnmounted, shallowRef } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
mid: {
|
||||
type: Number,
|
||||
default: new Date().getTime()
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 800
|
||||
},
|
||||
apiKey: {
|
||||
type: String,
|
||||
required: true
|
||||
|
|
@ -50,6 +55,7 @@
|
|||
const baiduMap = shallowRef(null)
|
||||
const baiduMapPointArr = ref([])
|
||||
const baiduMapInfoWindowObj = ref({})
|
||||
|
||||
const init = () => {
|
||||
// 创建script脚本 引入api
|
||||
const script = document.createElement('script')
|
||||
|
|
@ -58,7 +64,10 @@
|
|||
const head = document.getElementsByTagName('head')[0]
|
||||
head.appendChild(script)
|
||||
}
|
||||
// 初始化 地图
|
||||
|
||||
/**
|
||||
* 初始化 地图
|
||||
*/
|
||||
window.initMap = () => {
|
||||
baiduMap.value = new BMapGL.Map(`container-${props.mid}`)
|
||||
// 滚轮放大缩小
|
||||
|
|
@ -88,7 +97,10 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
// 初始化 控制控件
|
||||
|
||||
/**
|
||||
* 初始化 控制控件
|
||||
*/
|
||||
const initControlPlugin = () => {
|
||||
// 比例尺
|
||||
props.plugins.includes('BMap.ScaleControl') && baiduMap.value.addControl(new BMapGL.ScaleControl())
|
||||
|
|
@ -99,7 +111,11 @@
|
|||
// 3D控件
|
||||
props.plugins.includes('BMap.NavigationControl3D') && baiduMap.value.addControl(new BMapGL.NavigationControl3D())
|
||||
}
|
||||
// 渲染 点标记
|
||||
|
||||
/**
|
||||
* 渲染 点标记
|
||||
* @param dataArr
|
||||
*/
|
||||
const renderMarker = (dataArr) => {
|
||||
dataArr.forEach((d) => {
|
||||
const point = new BMapGL.Point(d.position[0], d.position[1])
|
||||
|
|
@ -359,6 +375,5 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@ AMap
|
|||
|
||||
### 使用方式
|
||||
|
||||
```text
|
||||
申请key
|
||||
```
|
||||
|
||||
访问 [高德地图官网](https://console.amap.com/dev/index) 注册账号，申请应用获得key
|
||||
|
||||
```vue
|
||||
|
||||
<template>
|
||||
|
|
@ -48,17 +54,18 @@ AMap
|
|||
|
||||
### Prop属性
|
||||
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
|---------------|---------------------|---------|--------|
|
||||
| mid | 容器ID | String | 时间戳 |
|
||||
| apiKey | 地图Key | String | |
|
||||
| center | 地图中心点 | String | 自动定位 |
|
||||
| plugins | 地图控件 | Array | |
|
||||
| viewMode | 效果：2D，3D | String | 3D |
|
||||
| zoom | 地图缩放比例 | Number | 12 |
|
||||
| pitch | 地图俯仰角度，有效范围 0-83 | String | 50 |
|
||||
| mapStyle | 地图样式 | String | normal |
|
||||
| markerCluster | 点聚合 | Boolean | true |
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
|---------------|-------------------|----------|-----------|
|
||||
| mid | 容器ID | String | 时间戳 |
|
||||
| height | 容器高度 | Number | 800，单位px |
|
||||
| apiKey | 地图Key | String | |
|
||||
| center | 地图中心点 | String | 自动定位 |
|
||||
| plugins | 地图控件 | Array | |
|
||||
| viewMode | 效果：2D，3D | String | 3D |
|
||||
| zoom | 地图缩放比例 | Number | 12 |
|
||||
| pitch | 地图俯仰角度，有效范围 0-83 | String | 50 |
|
||||
| mapStyle | 地图样式 | String | normal |
|
||||
| markerCluster | 点聚合 | Boolean | true |
|
||||
|
||||
#### 地图控件
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="gaodeMap">
|
||||
<div class="gaodeMap" :style="{height: `${height}px`}">
|
||||
<div :id="`container-${mid}`" style="width: 100%; height: 100%">地图资源加载中...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -13,6 +13,10 @@
|
|||
type: Number,
|
||||
default: new Date().getTime()
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 800
|
||||
},
|
||||
apiKey: {
|
||||
type: String,
|
||||
required: true
|
||||
|
|
@ -392,7 +396,6 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
|
||||
input[type='radio'] {
|
||||
-webkit-appearance: radio;
|
||||
|
|
|
|||
Loading…
Reference in New Issue