<template>
<div id="container" style="width: 100%; height: 100%"></div>
</template>
<script
charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
></script>
<script>
export default {
name: "Home",
data() {
return {}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
var center = new TMap.LatLng(39.984104, 116.307503)
var map = new TMap.Map("container", {
rotation: 20, //设置地图旋转角度
pitch: 30, //设置俯仰角度(0~45)
zoom: 12, //设置地图缩放级别
center: center //设置地图中心点坐标
})
new TMap.MultiMarker({
map: map,
styles: {
small: new TMap.MarkerStyle({
// 点标注的相关样式
width: 34, // 宽度
height: 46, // 高度
anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png", // 标注点图片url或base64地址
color: "#333", // 标注点文本颜色
size: 16, // 标注点文本文字大小
direction: "bottom", // 标注点文本文字相对于标注点图片的方位
offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
strokeColor: "#fff", // 标注点文本描边颜色
strokeWidth: 2 // 标注点文本描边宽度
}),
default: new TMap.MarkerStyle({
width: 92, // 宽度
height: 92, // 高度
anchor: { x: 46, y: 46 }, // 锚点位置
src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/circle.png", // 标注点图片url或base64地址
color: "#fff", // 标注点文本颜色
size: 22, // 标注点文本文字大小
offset: { x: 0, y: 16 } // 标注点文本文字基于direction方位的偏移属性
})
},
geometries: [
{
styleId: "small",
position: new TMap.LatLng(39.9543498091366, 116.3064286563349), // 标注点位置
content: "41" // 标注点文本
},
{
position: new TMap.LatLng(39.9891175495767, 116.28076993243667),
content: "34"
},
{
position: new TMap.LatLng(39.95959650879512, 116.26144674251236),
content: "9"
},
{
position: new TMap.LatLng(39.96950944017182, 116.34323407250122),
content: "7"
}
]
})
}
}
}