腾讯地图-画线、标记点

// 初始化地图
<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)
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值