總結：react專案中使用地圖——以騰訊地圖為例

目錄

準備作業

需求1：根據地址中文或者經緯度在地圖顯示對應的坐標點

需求2：搜索地址然后在地圖上顯示對應的大致路線

需求3：根據地址跳轉到本機安裝的對應地圖APP中，并顯示目標位置

由于專案中需要用到地圖展示，之前也沒用到過地圖展示，所以記錄一下自己的探索程序，共同成長，互勉！

準備作業

參考地圖功能需要參考對應的js包，可以到對應官方檔案查看例子，這里就不做多說明，附上鏈接（https://lbs.qq.com/），然后在官網注冊一個賬號，創建專案，生成對應的key值，這個時候就可以把對應的key值寫在剛才引入的js包鏈接上，我們專案用到的是umi框架，引入js檔案的地方是document.ejs，如果是別的專案自行百度引入的位置，

可以考慮把這個地圖封裝成組件，然后在需要的地方進參考即可，地圖的組件需要用到一個物件TMap，首先，你需要在頁面上撰寫一個div，然后創建地圖物件的時候初始在對應的div上，即可展現地圖，

// 初始化地圖
  function setMap() {
    
    //初始化地圖
      map = new TMap.Map(document.getElementById('addressMap'), {
        viewMode: '2D',
      });

      //初始化蒙層
      markerLayer = new TMap.MultiMarker({
        map: map, // 指定地圖容器
        // 樣式定義
        styles: {
          myStyle: new TMap.MarkerStyle({
            width: 18, // 點標記樣式寬度（像素）
            height: 26, // 點標記樣式高度（像素）
            anchor: { x: 16, y: 32 }
          }),
          startMarker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: start
          }),
          endMarker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: end
          })
        }
      });
  }

現在你打開頁面，已經可以在頁面上看到地圖了，自此，準備作業已經完成，

需求1：根據地址中文或者經緯度在地圖顯示對應的坐標點

這個需求需要根據地址中文查詢出對應的坐標值，然后在地圖上標注出來，我們需要撰寫一個函式用來在地圖上標注出對應的點，點的展示需要坐標值，所以我們還需要呼叫回應的介面，進行坐標值轉換，可查看官方檔案，這里就不做多介紹，

根據這個介面，會對應回傳中文地址的坐標值，而后，我們還需要一個函式來在地圖上描點，描點的樣式在初始化的時候已經定義好了樣式，直接參考即可，這個函式會先清除掉之前的標注點，如果你不想清除，則直接添加即可，

  // 加載標注點
  const setMarkerlayer =(item)=> {
    
    const _wait_to_clear_ = markerLayer.getGeometries();

    if (_wait_to_clear_.length > 0) {
      // 先清除舊標注點
      const str = _wait_to_clear_.map((item) => item.id);
      markerLayer.remove(str);
    }
    
    //設定對應的地圖中心點
    map.setCenter({ lat: current.lat, lng: current.lng });

    //增加標注點
    markerLayer.add({
      styleId: 'endMarker',  //之前初始地圖定義的樣式
      id: item.id | 'endmarker',
      position: new TMap.LatLng(item.lat || 0, item.lng || 0)
    });
  
  }

需求2：搜索地址然后在地圖上顯示對應的大致路線

這個需求根據你搜索的地點，然后在地圖上描繪出當前位置到搜索地點的大致路線，我們需要做的有兩個，定位當前所在位置，然后將其標注成起點，把搜索的地點標注成終點，然后描繪出起點和終點的路線，根據官方檔案的api，即可定位當前位置，并回傳對應的坐標值，

function getLocationIp() {
    let url = `/map/ws/location/v1/ip?key=${window.mapkey}`;
    io.get(url).then(res=> {
      addMarkerlayer(res.result.location, 'startMarker'); //增加標注點
    })
  }

描繪路線根據你傳入的兩個坐標位置，回傳對應的路線，然后根據官方給出的方法，即可描繪出路線，

  //初始化描線圖層
  const setPolylineLayer = () => {
    polylineLayer = new TMap.MultiPolyline({
      id: 'polyline-layer', //圖層唯一標識
      map: map,//繪制到目標地圖
      //折線樣式定義
      styles: {
        'style_blue': new TMap.PolylineStyle({
          'color': '#3777FF', //線填充色
          'width': 6, //折線寬度
          'borderWidth': 5, //邊線寬度
          'borderColor': '#FFF', //邊線顏色
          'lineCap': 'round' //線端頭方式
        })
      }
    })
  }

  //查詢路線
  const direcationPlan =() => {

    const copyCurrent = current;
    const copyPurpose = purpose;

    let url = '/map/ws/direction/v1/driving/' +
        '?from=' + current.lat + ',' + current.lng + '&to=' + purpose.lat + ',' + purpose.lng +
        '&output=json&callback=cb' +
        '&key=' + window.mapkey;
      io.get(url).then(res=>{
        cb(res);
      }).catch() 
  }

  //定義請求回呼函式
  const cb =(ret) => {

    let coors = ret.result.routes[0].polyline, pl = [];

    //坐標解壓（回傳的點串坐標，通過前向差分進行壓縮，因此需要解壓）
    let kr = 1000000;
    for (let i = 2; i < coors.length; i++) {
      coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
    }
    //將解壓后的坐標生成LatLng陣列
    for (let i = 0; i < coors.length; i += 2) {
      pl.push(new TMap.LatLng(coors[i], coors[i+1]));
    }

    setMarkerPolyline(pl)//顯示路線
  }

  // 增加描線點
  const setMarkerPolyline =(p1)=> {

    const _wait_to_clear_ = polylineLayer.getGeometries();

    if (_wait_to_clear_.length > 0) {
      // 先清除舊標注點
      const str = _wait_to_clear_.map((item) => item.id);
      polylineLayer.remove(str);
    }
    polylineLayer.add({
      'id': 'pl_1',//折線唯一標識，洗掉時使用
      'styleId': 'style_blue',//系結樣式名
      'paths': p1
    })
  }

效果如圖：

需求3：根據地址跳轉到本機安裝的對應地圖APP中，并顯示目標位置

目前找不到檢測移動端是否有安裝對應的APP，所以把市面上主流的三大地圖軟體都做了點擊跳轉，效果如圖：

如果本機有安裝對應的地圖APP，則直接跳轉到對應軟體，如果有安裝，則跳轉到對應的下載頁面，各自地圖的跳轉鏈接附上：

<a href="androidamap://poi?sourceApplication=dingtalk&keywords=XXX">打開安卓高德地圖</a><br>
<a href="iosamap://poi?sourceApplication=dingtalk&keywords=XXX">打開iOS高德地圖</a><br>
<a href="baidumap://map/place/search?query=XXX">打開百度地圖</a><br>
<a href="qqmap://map/search?keyword=XXXX">打開騰訊地圖</a>

實作的具體代碼如下：

 const toMoblieMap =(item)=> {

    if(item.label == '取消') {
      setIsShow(!isShow);
      return ;
    }

    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.location = (item?.openUrl1 || item?.openUrl) + address;//schema鏈接或者universal link
      window.setTimeout(function() { //如果沒有安裝app,便會執行setTimeout跳轉下載頁
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
          if(typeof hidden =="undefined" || hidden ==false) {
            window.location = item.download2; //ios下載地址
          }
        } else {
          window.close();
        }
      }, 4000);

    } else if (navigator.userAgent.match(/android/i)) {
      var state = null;
      try {
        window.location = item.openUrl + address; //schema鏈接或者universal link
        window.setTimeout(function() {
          let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden

          if(typeof hidden =="undefined" || hidden ==false) {
            window.location = item.download1; //android下載地址
          }
        }, 4000);
      } catch (e) {}
    }
  }

至此，基本的功能已經完成，有很多需要完善的地方，比如如何檢測到本機安裝的地圖軟體等，很多細節也處理的不是很好，希望各位指正，互相交流進步！！！