天地图简单使用

概要

天地图是一种地理信息系统（GIS）软件，在中国领先的地理信息服务提供商。它提供了丰富的地理空间数据和地图服务，包括地图浏览、地理信息查询、地理分析等功能。

天地图的主要特点包括：

1. 多种地图展示模式：用户可以根据需要选择不同的地图模式，如街道地图、卫星影像地图、地形地图等。
2. 多种地理查询功能：用户可以根据地点、地址、经纬度等进行地理查询，获取相关地理信息。
3. 地理信息分析功能：用户可以进行空间分析、统计分析等，对地理数据进行深入研究和分析。
4. 地图可视化定制：用户可以自定义地图的样式和内容，使得地图更符合个人需求。
5. 地图API支持：天地图提供了丰富的地图API，方便开发者在自己的应用程序中集成地图功能。

总体来说，天地图是一款功能强大、易于使用的地理信息系统软件，为用户提供了丰富的地理信息和地图服务，广泛应用于不同领域，如城市规划、交通管理、环境保护等。

需求

如图所示，再新增门店需要使用天地图来进行详细地址的选择，同时在地址上标记位置和提供地址搜索

代码

我这边把天地图封装成一个组件，需要用到的地方就引入。
引入天地图

 <t-map :adCode="cityAreaCode[2]" @clickTMap="clickTMap" @searchTMap="searchTMap" :lonlat="lonLat"
               @getSearchResult="getSearchResult" ref="TMap" :inputValue="inputValue" :address="address"></t-map>

传值

getSearchResult(e) {
      this.searchAddressResult = e
    }

详细地址输入框事件

   inputEvent(e) {
      clearTimeout(this.timeoutId);
      this.timeoutId = setTimeout(() => {
        this.inputValue = e
      }, 500);
    },

点击地图事件

clickTMap(e) {
      this.$set(this.model, 'address', e)
    },

<template>
  <div>
    <!--创建地图容器元素-->
    <div id="mapContainer" :style="'width:' + width +'; height:' + height" style="cursor: default"></div>
    <!-- 建议词面板 -->
    <div id="suggestsDiv" class="suggests"></div>
  </div>
</template>
<script>

let map, infoWin, bound
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    adCode: {
      type: String,
      default: ''
    },
    inputValue: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    lonlat: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      bound: ''
    };
  },
  created() {
    // 创建地图实例
    this.$nextTick(() => {
      this.initMap()
    })
  },
  watch: {
    adCode: {
      handler: function () {
        this.changeCity()
      },
      immediate: true
    },
    inputValue: {
      handler: function () {
        this.search(this.inputValue)
      },
      immediate: false
    },
    address: {
      handler: function () {
        this.addressSearch(this.address)
      }
    },
    lonlat: {
      handler: function () {
        this.searchAddressByLonLat(this.lonlat)
      }
    }
  },
  methods: {
    // 初始化天地图
    initMap(e) {
      const _this = this
      let T = window.T;
      map = new T.Map('mapContainer');
      let lc = new T.LocalCity();  //创建一个获取本地城市位置的实例
      lc.location(function (result) {  //利用ip进行定位
        map.centerAndZoom(new T.LngLat(result.lnglat.lng, result.lnglat.lat), 16);
      })
      _this.addressSearch(this.address)
      if (!e) {
        _this.mapClick()
      }
    },
    // 地图上的点击事件
    mapClick() {
      const _this = this
      //创建对象
      let geocode = new T.Geocoder();
      map.addEventListener("click", function (e) {
        _this.setMarker(e.lnglat.lng, e.lnglat.lat)
        geocode.getLocation(e.lnglat, searchResult);
      });

      function searchResult(result) {
        if (result.getStatus() == 0) {
          _this.$emit('clickTMap', result.getAddress())
        }
      }
    },
    /**
     * 设置覆盖物
     * @param lng 经度
     * @param lat 纬度
     */
    setMarker(lng, lat) {
      // 清除覆盖物
      map.clearOverLays();
      //创建标注对象
      var marker = new T.Marker(new T.LngLat(lng, lat));
      //向地图上添加标注
      map.addOverLay(marker);
    },
    // 切换城市
    changeCity() {
      if (!this.adCode) {
        return
      }
      let T = window.T;
      //创建对象
      let administrative = new T.AdministrativeDivision();
      let config = {
        needSubInfo: false,
        needAll: false,
        needPolygon: true,
        needPre: true,
        searchType: 0,
        searchWord: this.adCode
      };
      administrative.search(config, searchResult);

      function searchResult(result) {
        bound = result.data.bound
        if (result.msg === 'ok' && result.returncode === '100')
          map.centerAndZoom(new T.LngLat(result.data.lnt, result.data.lat), 16);
      }
    },
    //详细地址搜索 (所属地区无法搜索该行政区域时)
    localSearch(val) {
      const __this = this
      var config = {
        pageCapacity: 10,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
      }
      //创建搜索对象
      let localsearch = new T.LocalSearch(map, config);
      localsearch.search(val, 4)

      function localSearchResult(result) {
        //清空地图及搜索列表
        // __this.clearAll();
        //解析建议词信息
        suggests(result.getSuggests());

        //解析建议词信息
        function suggests(obj) {
          if (obj) {
            __this.$emit('getSearchResult', obj)
          } else {
            __this.$emit('getSearchResult', null)
          }
        }
      }
    },
    //根据Bounds进行本地搜索
    search(val) {
      const _this = this
      if (bound == null) {
        _this.localSearch(val)
        return
      }
      var config = {
        pageCapacity: 10,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
      };
      //创建搜索对象
      let localsearch = new T.LocalSearch(map, config);
      const boundsArr = bound.split(",").map(parseFloat);

      // 创建Bounds对象
      const bounds = new T.LngLatBounds(
        new T.LngLat(boundsArr[0], boundsArr[1]),
        new T.LngLat(boundsArr[2], boundsArr[3])
      );
      localsearch.searchInBounds(val, bounds)

      //创建矩形
      createRect();

      function localSearchResult(result) {
        //清空地图及搜索列表
        _this.clearAll();
        //创建矩形
        createRect();
        //根据返回类型解析搜索结果
        switch (parseInt(result.getResultType())) {
          case 1:
            //解析点数据结果
            pois(result.getPois());
            break;
          case 2:
            //解析统计城市
            statistics(result.getStatistics());
            break;
        }
      }

      //解析点数据结果
      function pois(obj) {
        if (obj) {
          _this.$emit('getSearchResult', obj)
        } else {
          _this.$emit('getSearchResult', null)
        }
      }

      //矩形
      function createRect() {
        var config = {
          color: "blue", //折线颜色
          fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
          weight: "3", //折线的宽度，以像素为单位
          opacity: 0.5,    //折线的透明度，取值范围0 - 1
          fillOpacity: 0.4,
          lineStyle: "solid" //折线的样式，solid或dashed
        };

        //创建矩形对象
        var rect = new T.Rectangle(bounds, config);
        map.addOverLay(rect);
      }
    },
    //清空地图及搜索列表
    clearAll() {
      const _this = this
      map.clearOverLays();
      map.clearLayers()
      // _this.initMap()
    },
    //编辑弹框详细地址搜索（编辑回显标注位置）
    addressSearch(address) {
      const _this = this
      if (address == null || address == '') {
        return
      }
      //创建对象
      let geocoder = new T.Geocoder();
      geocoder.getPoint(address, searchResult)

      function searchResult(result) {
        if (result.getStatus() == 0) {
          map.panTo(result.getLocationPoint(), 16);
          var marker = new T.Marker(result.getLocationPoint());
          map.addOverLay(marker);
          // const point = new T.LngLat(result.location.lon, result.location.lat);
          // _this.searchSuggestWord(point)
        }
      }
    },

    //点击某个建议词的搜索事件
    searchAddressByLonLat(lonlat) {
      const _this = this
      let T = window.T
      let geocoder = new T.Geocoder()
      map.clearOverLays();
      geocoder.getLocation(lonlat, searchResult);

      function searchResult(result) {
        let T = window.T
        if (result.getStatus() == 0) {
          map.panTo(result.getLocationPoint(), 16);
          //创建标注对象
          var marker = new T.Marker(result.getLocationPoint());
          //向地图上添加标注
          map.addOverLay(marker);
          const point = new T.LngLat(result.location.lon, result.location.lat);
          searchSuggestWord(point)
        }

        function searchSuggestWord(point) {
          let geocode = new T.Geocoder()
          geocode.getLocation(point, searchResult);

          function searchResult(result) {
            if (result.getStatus() == 0) {
              _this.$emit('searchTMap', result.formatted_address)
            }
          }
        }
      }
    },
    //搜素点击那个建议词的详细地址(根据经纬度)
    searchSuggestWord(point) {
      const _this = this
      let geocode = new T.Geocoder()
      geocode.getLocation(point, searchResult);

      function searchResult(result) {
        if (result.getStatus() == 0) {
          _this.$emit('searchTMap', result.formatted_address)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>