基于腾讯地图的实时定位

关于地图定位已经是一个老生常谈的话题了，实时定位也同样密不可分。

引入依赖

<script src="https://map.qq.com/api/js?v=2.exp&callback=init&key=yourkey"></script>

初始化地图

function initMap ($el) {
  let center = new qq.maps.LatLng(latitude, longitude)
  let map = new qq.maps.Map(document.getElementById($el), {
    center: center,
    // 缩放级别
    zoom: 13,
    minZoom: 12,
    // 设置控件的地图类型和位置
    mapTypeControlOptions: {
    // 设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显  示卫星图像上的主要街道透明层
      mapTypeIds: [],
      // 设置控件位置相对上方中间位置对齐
      position: qq.maps.ControlPosition.TOP_CENTER
    },
    // 启用平移控件
    panControl: true,
    // 设置平移控件的位置
    panControlOptions: {
      // 设置平移控件的位置为相对右方中间位置对齐.
      position: qq.maps.ControlPosition.LEFT_BOTTOM
    },
    // 启用缩放控件
    zoomControl: true,
    // 设置缩放控件的样式
    zoomControlOptions: {
      position: qq.maps.ControlPosition.LEFT_TOP,
      // 设置缩放控件样式为默认的缩放控件。会根据地图尺寸的大小和其他因素自动调整样式
      style: qq.maps.ZoomControlStyle.DEFAULT
      // 设置缩放控件样式为标准的缩放控件。包含放大、缩小和滑块
      // style: qq.maps.ZoomControlStyle.LARGE
      // 设置缩放控件样式为仅包含放大缩小两个按钮
      // style: qq.maps.ZoomControlStyle.SMALL
    }
    // 监听多拽事件
    let event = qq.maps.event.addListener(map, 'drag', function () {
       // doSomething
       qq.maps.event.removeListener(event)
    })
  })
}

添加覆盖物

function addMarker (center) {
  let marker = new qq.maps.Marker({
    position: center,
    map: map
  })
  // 图标尺寸，该尺寸为显示图标的实际尺寸，不是整个图片的原始尺寸，当需要显示的是整个图片中一部分的时候必须设置该属性。
  let size = new qq.maps.Size(120, 180)
  // 切图坐标，该坐标是相对于图片左上角的相对像素坐标，当需要显示的是整个图片中一部分的时候必须设置该属性，默认为（0,0）。
  let origin = new qq.maps.Point(0, 0)
  //  锚点坐标，描述经纬度点对应图标中的位置，坐标是相对于图标部分左上角的相对像素坐标，如果设置的origin参数，该坐标就是相对于origin的相对坐标，默认为底部中心点（x/2,y）
  let anchor = new qq.maps.Point(15, 20)
  // 缩放尺寸，用于拉伸或缩小原图片时使用，该尺寸是用来改变整个图片的尺寸。
  let scaleSize = new qq.maps.Size(15, 15)
  let markerIcon = new qq.maps.MarkerImage(
    redIcon,
    size,
    origin,
    anchor,
    scaleSize
  )
  marker.setIcon(yourIconPath)
}

添加标签

function addLabel (center) {
  let label = new qq.maps.Label({
  position: center,
    map: map,
    offset: new qq.maps.Size(0, 0),
    content: 'content'
  })
  let cssStyle = {
    color: '#FFFFFF',
    fontSize: '12px',
    fontWeight: 'bold',
    padding: '10px',
    backgroundColor: 'rgba(0,0,0,0.50)',
    borderRadius: '8px'
  }
  label.setStyle(cssStyle)
}

修改覆盖物位置

function editMarker (center) {
  let center = new qq.maps.LatLng(latitude, longitude)
  marker.setPosition(center)
}

修改标签文案及位置

function editLabel (center) {
  let center = new qq.maps.LatLng(latitude, longitude)
  label.setOptions({
    position: center,
    content: 'content'
  })
}

删除标签

function deleteLabel () {
  state.mapLabelsArray[i].setMap(null)
}

地图跟随移动

function addMapAction (center) {
  let center = new qq.maps.LatLng(latitude, longitude)
  map.panTo(center)
}

计算距离

使用计算距离 api 进行精准计算，包括一对多，多对多等方法，在申请 key 时需要选择 WebService API 服务，并在后台进行域名白名单配置，详细可参考 WebService API 。

function getDistance () {
  let url = "https://apis.map.qq.com/ws/distance/v1/?"
  let data = {
    key: "your key",
    from: `${latitude1}, ${longitude2}`,
    to: `${latitude2}, ${longitude2}`,
    output: 'jsonp'
  }

  $.ajax({
    type: "get",
    dataType: 'jsonp',
    data: data,
    jsonp: "callback",
    jsonpCallback: "mapFunction",
    url: url,
    success: function(res) {
      // doSomething
    },
    error: function(err) {
      // doSomething
    }
  })
}

实时定位样例

将所需方法进行简单处理

window.onload = function () {
  let $el = document.getElementById('map')
  map.initMap($el, function () {
  	map.addMarker()
	map.addLabel()
  	setInterval(function () {
  	  map.getDistance(function (distance) {
	    map.editMarker()
	    map.editLabel()
	    map.addMapAction()
	  })	
	}, 2000)
  })
}

参考

1. WebService API
2. JavaScript API