Leaflet地图实现定位搜索

我用的是天地图里的api,因为是使用leaflet框架混合天地图开发的,功能也不是特别完善,也不是最优方案,有机会学习一下leaflet框架中定位搜索的api

    // 搜索地名
    searchMap() {
      console.log(document.getElementById('boox').val, this.searchName, 'searchName')
      this.poisArr = [] //地方名称
      console.log('触发搜索')
      this.isShow = true
      this.clearAll()
      const _that = this
      let addresServer = `http://api.tianditu.gov.cn/v2/search?postStr={"keyWord":"${ _that.searchName}","level":12,"mapBound":"116.02524,39.83833,116.65592,39.99185","queryType":1,"start":0,"count":10}&type=query&tk=天地图key`
      axios
        .get(addresServer)
        .then(res => {
          this.rt = res
          if (res.status == 200) {
            switch (res.data.resultType) {
              case 1:
                //解析点数据结果
                this.rt = res.data.pois
                this.pois(this.rt)
                break
              case 2:
                //解析推荐城市
                this.rt = res.data.statistics
                this.statistics(this.rt)
                break
              case 3:
                //解析行政区划边界
                this.rt = res.data.area
                this.area(this.rt)
                break
              case 4:
                //解析建议词信息
                this.rt = res.data.suggests
                break
              case 5:
                //解析公交信息
                this.rt = res.data.lineData
                break
            }
          } else {
            console.log(res.statusText)
          }
          console.log(this.rt, ';解析后的rt')
        })
        .catch(err => {
          console.log(err)
        })
    },

    pois(obj) {  //obj是天地图后台返回来的数据
      this.isShow = true
      this.poisArr = [] //地方名称
      this.poisMarkerArr = [] //地方坐标
      var _that = this
      var markerGroup = null
      var myIcon = L.icon({
        iconUrl: 'http://ny.tsrnjs.com/upload/guanlifang.png'
      })

      if (obj) {
        var divMarker = document.createElement('div')
        for (var i = 0; i < obj.length; i++) {
          ;(function(i) {
            var name = obj[i].name //名称
            var address = obj[i].address //地址
            var lnglatArr = [] //坐标
            lnglatArr.push(obj[i].lonlat.split(',')[1], obj[i].lonlat.split(',')[0])
            _that.poisMarkerArr.push(lnglatArr)
            var markerr = L.marker(lnglatArr, { icon: myIcon }).bindPopup(name, address)
            markerGroup = L.layerGroup([markerr]).addTo(_that.map)
            _that.poisArr.push(name)
          })(i)
        }
        _that.map.flyTo(_that.poisMarkerArr[0], 13)(zoomArr)
        document.getElementById('searchDiv').appendChild(divMarker)
        document.getElementById('resultDiv').style.display = 'block'
      }
    },
    statistics(obj) {
      this.isShow = false
      console.log(obj, 'statistics')
      this.poisArr = ['您搜索的在以下城市有结果:']
      this.poisMarkerArr = []
      if (obj) {
        if (obj.priorityCitys) {
          for (let i = 0; i < obj.priorityCitys.length; i++) {
            this.poisArr.push(obj.priorityCitys[i].adminName)
          }
        }
        document.getElementById('statisticsDiv').style.display = 'block'
        document.getElementById('statisticsDiv').innerHTML = priorityCitysHtml + allAdminsHtml
      }
    },
    area(obj) {
      this.isShow = false
      let poly = obj.lonlat.split(',')
      console.log(obj, typeof poly, 'area')
      this.map.flyTo(poly.reverse(), 13)
      //  var polygon = L.polygon(poly, { color: '#333', weight: 4 }).addTo(this.map)
    },

    prompt(obj) {
      console.log(obj, 'promptobj')
      var prompts = obj.getPrompt()
      console.log(prompts, 'prompts')
      if (prompts) {
        var promptHtml = ''
        for (var i = 0; i < prompts.length; i++) {
          var prompt = prompts[i]
          var promptType = prompt.type
          var promptAdmins = prompt.admins
          var meanprompt = prompt.DidYouMean
          if (promptType == 1) {
            promptHtml +=
              '<p>您是否要在' +
              promptAdmins[0].name +
              '</strong>搜索更多包含<strong>' +
              obj.getKeyword() +
              '</strong>的相关内容?<p>'
          } else if (promptType == 2) {
            promptHtml +=
              '<p>在<strong>' +
              promptAdmins[0].name +
              '</strong>没有搜索到与<strong>' +
              obj.getKeyword() +
              '</strong>相关的结果。<p>'
            if (meanprompt) {
              promptHtml +=
                "<p>您是否要找:<font weight='bold' color='#035fbe'><strong>" + meanprompt + '</strong></font><p>'
            }
          } else if (promptType == 3) {
            promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果,您是否要找:</p>"
            for (i = 0; i < promptAdmins.length; i++) {
              promptHtml += '<p>' + promptAdmins[i].name + '</p>'
            }
          }
        }
        if (promptHtml != '') {
          document.getElementById('promptDiv').style.display = 'block'
          document.getElementById('promptDiv').innerHTML = promptHtml
        }
      }
    },
    searchResult(result) {
      const _that = this
      console.log(result)
      _that.map.removeLayer(this.marker) // 工业用地
      _that.marker = new L.layerGroup()
      // document.getElementById("zuobiao").value = result.location.lat + ',' + result.location.lon
      // if (result.getStatus() == 0) {
      _that.map.panTo(result, 16) // 跳转
      //创建标注对象
      let gurl = '', // 标注图片
        isize = [30, 30]
      let myIcon = L.icon({
        iconUrl: gurl,
        iconSize: isize,
        iconAnchor: [9, 20],
        shadowSize: [68, 95],
        shadowAnchor: [22, 94]
      })
      _that.marker = new L.Marker(result, {
        icon: myIcon
      }) // 添加标注
      //向地图上添加标注
      _that.marker.addTo(_that.map)
      _that.searchShow = false
    }

地图搜索分为五级吧在我理解中,最后两个没搞,感觉用处不大并且费事,先实现最基本的功能

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值