我用的是天地图里的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
}
地图搜索分为五级吧在我理解中,最后两个没搞,感觉用处不大并且费事,先实现最基本的功能