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

時間 2020-04-02

標籤 vue 地圖開發實戰解決百度衛星圖問題简体版

原文原文鏈接

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

講解的功能有html

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

天地圖官方連接vue

項目使用vue-cli3，vue2開發java

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

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

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

二、渲染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);
複製代碼

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

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

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

<!--添加點擊按鈕-->
 <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); //開啓信息窗口
      },
複製代碼