初始化

init() {
            this.map = new window.T.Map('mapDiv', {
                projection: 'EPSG:4326'
            })
            this.map.centerAndZoom(new window.T.LngLat(106.59588, 29.57764), this.zoom)
            // 注册点击事件
            this.map.addEventListener('click', this.mapClick)
            // 地理编码
            this.geocode = new window.T.Geocoder()
            // 输入提示
            var config = {
                pageCapacity: 10, // 每页显示的数量
                onSearchComplete: this.localSearchResult // 接收数据的回调函数
            }
            // 创建搜索对象
            this.localsearch = new window.T.LocalSearch(this.map, config)
            this.iptchange()
        },

点击获取经纬度并查询地址

mapClick(e) {
		//e.lnglat.getLng(), e.lnglat.getLat() 经纬度
      this.address.lngLats = [e.lnglat.getLng(), e.lnglat.getLat()]
      this.geocode.getLocation(new window.T.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), (result) => {
      		//地址
          this.address= result.formatted_address
      })
      //标点事件
      this.addMarker(e.lnglat.getLng(), e.lnglat.getLat())
  },

标点

// 标点
addMarker(getLng, getLat) {
    if (this.marker) {
        this.map.removeOverLay(this.marker)
    }
    var icon = new window.T.Icon({
        iconUrl: bd,
        iconSize: new window.T.Point(30, 30),
        iconAnchor: new window.T.Point(10, 56)
    })
    var point = new window.T.LngLat(getLng, getLat, {
        icon: icon
    })
    this.marker = new window.T.Marker(point) // 创建标注
    this.map.addOverLay(this.marker) // 将标注添加到地图中
},

画线

// 画线
   Polyline() {
   		//清除画线
       if (this.line) {
           this.map.removeOverLay(this.line)
       }
       var points = []
       this.address.lngLats.forEach(item => {
           points.push(new window.T.LngLat(item[0], item[1]))
       })
       this.line = new window.T.Polyline(points)
       this.map.addOverLay(this.line)
   },

跳转到经纬度所在位置

this.map.panTo(new window.T.LngLat(lg[0] * 1, lg[1] * 1), 15)
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐