vue天地圖開發實戰，解決高德百度，無衛星圖問題

在實際開發過程當中，發現高德和百度地圖等，沒法使用衛星圖查看鄉鎮問題，遂使用政府開發的天地圖。寫一份實（jiao）戰（xue）記錄，爲開源精神作一份貢獻。

講解的功能有

1. 天地圖入門
2. 地圖渲染
3. 添加地圖控件
4. 定位用戶座標，繪製城市邊界，並經過移動標點從新定位經緯度
5. 添加多個點，而且點擊彈出信息框

天地圖官方連接

項目使用vue-cli3，vue2開發

一、在public-index.html引入天地圖cdn

<!--index.html-->
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script>

key申請地址
應用建立成功就能看到key

二、渲染dome

<!--建立dome容器-->
 <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>

//生命週期 - 在掛載完成（能夠訪問DOM元素）
 mounted() {
   this.onLoad()
  },
  methods(){
   onLoad(){
    let that=this  //將方法放在mounted，會有指向問題，定義this使用就會正常
    let zoom = 12; //地圖的初始化級別，及放大比例
    that.map = new T.Map("mapDiv");
    that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //地圖的初始化中心點，此爲北京的經緯度
   }
  }

三、添加地圖類型控件

var ctrl = new T.Control.MapType([
        {
          title: "地圖", //地圖控件上所要顯示的圖層名稱
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地圖控件上所要顯示的圖層圖標（默認圖標大小80x80）
          layer: TMAP_NORMAL_MAP //地圖類型對象，即MapType。
        },
        {
          title: "衛星混合",
          icon:
            "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: TMAP_HYBRID_MAP
        }
      ]);
       that.map.addControl(ctrl);

我只添加了兩種類型的衛星，更多類型能夠查看官方文檔。

值得注意的是：官方文檔提供的代碼格式錯誤，不能直接copy下來用

四、定位用戶座標，繪製城市邊界，並經過移動標點從新定位經緯度

<!--添加點擊按鈕-->
 <button
    style="position: absolute;
    z-index: 500;
    border: 1px solid;
    right: 7%;
    bottom: 10%;
    color: red;
    background: green;
    padding: 10px;"
      @click="positionBtn"
    >定位座標</button>

data() {
    //這裏存放數據
    return {
        cityName:""  //暫存城市名稱
    };
  },
  positionBtn() {
        let that =this
      // this.map.clearOverLays();   //清理地圖上的覆蓋物
      let lc = new T.LocalCity();  //建立一個獲取本地城市位置的實例
      lc.location(function(e) {  //利用ip進行定位
        alert(e.cityName);
        let marker = new T.Marker(e.lnglat);  //e.lnglat，標註點的地理座標
        that.map.addOverLay(marker);  //addOverLay方法，將覆蓋物添加到地圖中，一個覆蓋物實例只能向地圖中添加一次。
        that.getMap(); //建立地圖對象

        marker.addEventListener("dragend", overlay_style); //添加事件監聽函數。
        marker.enableDragging(); //開啓標註拖拽功能

        function overlay_style(e) {
          let p = e.target;
          alert(
            "該地區經緯度是：" + p.getLngLat().lng + "," + p.getLngLat().lat
          );
        }
      });
    },
   

    getMap() {
        let that= this
      //建立對象
      let administrative = new T.AdministrativeDivision(); //建立一個獲取行政區劃的實例
      let config = {
        needSubInfo: false, //是否須要下一級信息
        needAll: false, //是否須要全部子節點。
        needPolygon: true,//是否須要行政區劃範圍。
        needPre: true,//是否須要上一級全部信息。
        searchType: 1,//查詢類型。0表示根據code查詢，1表示根據名稱查詢。
        searchWord: this.cityName//查詢行政區劃的名稱。
      };
      administrative.search(config, searchResult);//方法：根據檢索詞發起檢索，searchResult：回調參數
      function searchResult(result) {
        if (result.getStatus() == 100) {
          let data = result.getData();
          that.showMsg(data);
        } else {
          result.getMsg();
        }
      }
      //具體內容詳見AdministrativeDivisionResult類。
    },
    showMsg(data) {
      for (let i = 0; i < data.length; i++) {
        //解釋上級行政區劃
        if (data[i].parents) {
          let upLevel = "";
          if (data[i].parents.country) {
            upLevel += data[i].parents.country.name;
          }
          if (data[i].parents.province) {
            upLevel += data[i].parents.province.name;
          }
        }

        if (data[i].points) {
          //繪製行政區劃
          this.polygon(data[i].points);
        }

        //解釋下級行政區劃
        if (data[i].child) {
          showMsg(data[i].child);
          console.log(data[i].child.points);
          if (data[i].child.points) {
            //繪製行政區劃
            this.polygon(data[i].child.points);
          }
        }
      }
    },

    polygon(points) {
        let that=this
      let pointsArr = [];
      for (let i = 0; i < points.length; i++) {
        let regionLngLats = [];
        let regionArr = points[i].region.split(",");
        for (let m = 0; m < regionArr.length; m++) {
          let lnglatArr = regionArr[m].split(" ");
          let lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
          regionLngLats.push(lnglat);
          pointsArr.push(lnglat);
        }
        //建立面對象,樣式
        let polygon = new T.Polygon(regionLngLats, {
          color: "#fd737a",
          weight: 3,
          opacity: 1,
          fillColor: "#FFFFFF", //填充顏色。
          fillOpacity: 0.3 //填充透明度
        });
        //向地圖上添加行政區劃面
        that.map.addOverLay(polygon);
      }
      //顯示最佳比例尺
      that.map.setViewport(pointsArr);
      alert(
        "當前地圖中心點：" +
          that.map.getCenter().getLng() +
          "," +
          that.map.getCenter().getLat()
      );
    },

五、添加多個點，而且點擊彈出信息框

<!--添加點擊按鈕-->
  <button
      style="position: absolute;
    z-index: 500;
    border: 1px solid;
    right: 7%;
    bottom: 5%;
    color: red;
    background: green;
    padding: 10px;"
      @click="pointsBtn"
    >添加多個點</button>

pointsBtn() {
        let that=this
      let data_info = [
        [
          116.417854,
          39.921988,
          "地址：北京市東城區王府井大街88號樂天銀泰百貨八層"
        ],
        [116.406605, 39.921585, "地址：北京市東城區東華門大街"],
        [116.412222, 39.912345, "地址：北京市東城區正義路甲5號"]
      ];

      for (let i = 0; i < data_info.length; i++) {
        let marker = new T.Marker(
          new T.LngLat(data_info[i][0], data_info[i][1])
        ); // 建立標註
        let content = data_info[i][2];
        that.map.addOverLay(marker); // 將標註添加到地圖中
        that.addClickHandler(content, marker);
      }
     
   
    },
 addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
          that.openInfo(content, e);
        });
      },
 openInfo(content, e) {
        let point = e.lnglat;
        that.marker = new T.Marker(point); // 建立標註
        let markerInfoWin = new T.InfoWindow(content, {
          offset: new T.Point(0, -30)
        }); // 建立信息窗口對象
        that.map.openInfoWindow(markerInfoWin, point); //開啓信息窗口
      },

使用自定義信息框，會涉及到利用三目運算符，根據數字轉換成對應字符的問題，記得用()把三木運算符括起來，不然會致使前面的html沒法渲染

結語

網上寫天地圖的文章挺少，其實只要把坑踩過了仍是挺好用的。
以爲有用的小夥伴，能夠請我喝杯奶茶以資鼓勵。