Appearance
地图
地图组件
基础示例
vue
<template>
<tlbs-map
ref="map"
api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
:center="center"
:zoom="17"
:control="control"
:options="options"
@click="onClick"
>
<div class="control-container">
<button @click.stop="changeCenter({ lat: 40.040417, lng: 116.273514 })">
北京腾讯总部
</button>
<button @click.stop="changeCenter({ lat: 40.008352, lng: 116.389672 })">
北京亚洲金融大厦
</button>
</div>
</tlbs-map>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue-demi';
export default defineComponent({
name: 'MapDemo',
setup() {
const map = ref(null);
const center = ref({ lat: 39.91799, lng: 116.397027 });
const changeCenter = (latLng: { lat: number; lng: number }) => {
center.value = latLng;
};
const onClick = (e: Event) => {
console.log(e);
};
return {
center,
onClick,
control: {
scale: {},
zoom: {
position: 'topRight',
},
},
changeCenter,
map,
options: {
renderOptions: {
renderOptions: true,
},
},
};
},
});
</script>
<style scoped>
.control-container {
position: absolute;
top: 0;
left: 0;
z-index: 1001;
display: flex;
align-items: center;
}
button {
padding: 4px;
background-color: #fff;
margin-right: 5px;
border: 1px solid #ddd;
}
</style>
props
名称 | 类型 | 说明 |
---|---|---|
apiKey | String | 腾讯位置服务开发Key。 |
libraries | String | 附加库,多个附件库用逗号隔开,默认visualization,geometry,vector,tools。 |
center | { lat:number; lng:number } | 地图中心点经纬度。 |
zoom | Number | 地图缩放级别,支持3~20。 |
minZoom | Number | 地图最小缩放级别,默认为3。 |
maxZoom | Number | 地图最大缩放级别,默认为20。 |
control | Object | 地图控件的配置,TS类型:Control, |
options | TMap.MapOptions | 除了上述属性的其他配置参数,点击下面官网文档链接查看 |
Control类型
ts
interface Control {
scale: { position: string; className: string } | boolean;
zoom: { position: string; className: string, numVisible: boolean} | boolean;
rotation: { position: string; className: string } | boolean;
}
参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
事件
事件支持列表参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
组件实例属性
名称 | 类型 | 说明 |
---|---|---|
map | TMap.Map | 地图实例。 |