vue中封裝騰訊地圖組件

vue中封裝騰訊地圖

• 直接上代碼
• 頁面調用

直接上代碼

export function TMap (key) {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      resolve(window.qq)// 注意這裏
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://map.qq.com/api/js?v=2.exp&callback=init&key=這寫本身申請的key'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

頁面調用

<div id="container" style="width:1070px;height:450px;"></div>

import { TMap } from '../utils/TXmap'
TMap () {
      TMap().then(qq => {
        var center = new qq.maps.LatLng(this.datatable[0].workon_latitude, this.datatable[0].workon_longitude)
        var map = new qq.maps.Map(document.getElementById('container'), {
          // 地圖的中心地理座標
          center: center,
          // 初始化地圖縮放級別
          zoom: 11
        })
        var infoWin = new qq.maps.InfoWindow({
          map: map
        })
        // let latlngBounds = new qq.maps.LatLngBounds()
        console.log('latlngBounds')
        var thih = this
        var marker
        for (let i = 0; i < thih.datatable.length; i++) {
          marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(thih.datatable[i].workon_latitude, thih.datatable[i].workon_longitude),
            map: map
          })
          marker.id = thih.datatable[i].station_id
          qq.maps.event.addListener(marker, 'click', function () {
            sessionStorage.setItem('particulars', JSON.stringify(thih.datatable[i]))
            console.log(thih.datatable[i])
            infoWin.open()
            // eslint-disable-next-line no-useless-escape
            infoWin.setContent(`<div>${thih.datatable[i].station_name} <p>人數: ${thih.datatable[i].workers_num} <button onclick='aaa("${thih.datatable[i].id}")' style='color:red'>查看詳情</button></p></div>`)
            // 提示窗位置
            infoWin.setPosition(new qq.maps.LatLng(thih.datatable[i].workon_latitude, thih.datatable[i].workon_longitude))
          })
        }
      })
    }

這是個人頁面效果,不懂能夠私聊