腾讯地图学习笔记

1. Vue中初始化地图

首先给html添加一个盒子：

<div id="tx_map" />

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

 1 const mapScript = document.createElement('script')
 2 mapScript.type = 'text/javascript'
 3 mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
 4 document.body.appendChild(mapScript)
 5 
 6 mapScript.onload = () => {
 7      console.log('mapScript加载完毕')
 8      this.$nextTick(() => {
 9           const map = new TMap.Map(document.getElementById('tx_map'), {
10             // 加载地图 经纬度 信息
11             center: new TMap.LatLng(latitude, longitude),
12             zoom: 15, // 设置缩放级别
13             draggable: true, // 设置是否可以拖拽
14             scrollwheel: true, // 设置是否可以滚动
15             disableDoubleClickZoom: true // 设置是否可以双击放大
16           })
17           this.map = map
18   // 地图加载完的事件
19           this.map.on('tilesloaded', () => {
20             if (!this.markerLayer) {
21             // 给地图添加点坐标
22               this.markerLayer = new TMap.MultiMarker({
23                   map: this.map,
24                   geometries: [{
25                     id: '1',
26                     'position': new TMap.LatLng(latitude, longitude) // 点标记坐标位置
27                   }]
28               })
29               // 把该点位放到地图中心点
30               this.map.setCenter(new TMap.LatLng(latitude, longitude))
31             }
32           })
33       })
34 }

2. 地图搜索 jsonp

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