// 初始化地图
<div class='map-wrapper'></div>
// JS代码
this.map = new qq.maps.Map(document.getElementById("map-wrapper"), {
center: new qq.maps.LatLng(latitude, longitude), // 中心点的坐标
zoom: 13, // 缩放等级
disableDefaultUI: true // 禁用所有控件
})
this.infoWin = new qq.maps.InfoWindow({
map: this.map
})
// 画线
var path = [
new qq.maps.LatLng(39.910, 116.399),
new qq.maps.LatLng(39.920, 116.405),
new qq.maps.LatLng(39.930, 116.420)
]
var polygon = new qq.maps.Polyline({
map: map, // 地图
path: path, // 点的集合
strokeWeight: 5, // 折线的宽度
editable: false, // 是否可编辑点的位置
strokeColor: '#12B35D', // 线的颜色
})
// 标记点
const cssA = {
backgroundImage: 'url()', // 背景图片
width: '28px',
height: '32px',
backgroundSize: 'cover',
border: 'none',
transform: 'translate(-50%, -100%)' // 图片是以左上角为中心的,所以要transform
}
const marker = new qq.maps.LatLng(39.674924, 116.357051)
new qq.maps.Label({
position: marker,
map: this.map,
style: cssA
})
// 弹框
const innerHTML = `<div></div>`
new qq.maps.Label({
position: new qq.maps.LatLng(39.674924, 116.357051), // 设置中心位置
map: this.map,
content: innerHTML,
style: {} // 弹框样式
})
// 自动设置中心点及缩放等级
const latlngBounds = new qq.maps.LatLngBounds()
data.map(item => { // data: 所有点的经纬度
latlngBounds.extend(new qq.maps.LatLng(...item)) // item: [longitude,latitude]
})
this.map.fitBounds(latlngBounds)
腾讯地图-画线、标记点
最新推荐文章于 2023-10-21 13:44:15 发布