腾讯地图学习笔记

1.  Vue中初始化地图

     首先给html添加一个盒子：

<div id="tx_map" />

       然后根据官网示例实现异步加载地图：

const mapScript = document.createElement('script')
mapScript.type = 'text/javascript'
mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
document.body.appendChild(mapScript)

mapScript.onload = () => {
     console.log('mapScript加载完毕')
     this.$nextTick(() => {
          const map = new TMap.Map(document.getElementById('tx_map'), {
            // 加载地图 经纬度 信息
            center: new TMap.LatLng(latitude, longitude),
            zoom: 15, // 设置缩放级别
            draggable: true, // 设置是否可以拖拽
            scrollwheel: true, // 设置是否可以滚动
            disableDoubleClickZoom: true // 设置是否可以双击放大
          })
          this.map = map
  // 地图加载完的事件
          this.map.on('tilesloaded', () => {
            if (!this.markerLayer) {
            // 给地图添加点坐标
              this.markerLayer = new TMap.MultiMarker({
                  map: this.map,
                  geometries: [{
                    id: '1',
                    'position': new TMap.LatLng(latitude, longitude) // 点标记坐标位置
                  }]
              })
              // 把该点位放到地图中心点
              this.map.setCenter(new TMap.LatLng(latitude, longitude))
            }
          })
      })
}

2. 地图搜索 jsonp

 

 this.$jsonp(url, {
    keyword: 关键字(用于在输入框中搜索一个地方),
    location: 经纬度(用于在地图上点击一个点位，显示当前点位名称),
    output: ‘jsonp’
 }).then(res => {
    res: {
      data: [
         location: {
           lat: 纬度, 
           lng: 经度
         }
      ]
   }
 }).catch(err => {
    console.log(‘地图搜索失败’)
 })