uniapp使用天地图做一个地图选点

我没有找到直接用的方法，所有就写了一个H5,利用web-view嵌入进去，虽然效果不好，但是省了每年5万的地图使用费用

先看效果

选点

1.首先需要在天地图申请一个key   类型根据自己需求国家地理信息公共服务平台 天地图Web site created using create-react-apphttps://www.tianditu.gov.cn/

 2.拿到key以后直接使用就行了

<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key">

首先需要获取当前经纬度，来进行在地图上的标点，我是在别的页面获取的经纬度传过来，所以这里就没有获取经纬度的方法，自己写一个方法即可，下面是我的经纬度，我的是用路由传输过来的！！！！

    let lngss = getUrlParams('lng')
    let lataa = getUrlParams('lat')

    function getUrlParams(key) {
        let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)")
        let r = window.location.search.substr(1).match(reg)
        if (r != null) return unescape(r[2])
        return null
    }

然后就是初始化出来一个地图了，初始化完成就可以在里面加入地图的点击事件。把我们点击的位置标注出来，最下面是搜索，要在初始化的时候创建

    function onLoad() {
        map = new T.Map('mapDiv')
        map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom)
        // var lng = lngss
        // var lat = lataa
        var lng = 116.40769
        var lat = 39.89945

        // 在地图上显示当前位置的图标
        var icon = new T.Icon({
            iconUrl: './weizhi.jpeg',
            iconSize: new T.Point(20, 35),
            iconAnchor: new T.Point(12, 41)
        })
        marker = new T.Marker(new T.LngLat(lng, lat), {
            icon: icon
        })
        map.addOverLay(marker)
        // 将地图中心点移动到当前位置
        map.panTo(new T.LngLat(lng, lat))
        // 显示当前位置的详细地址
        getAddress(lng, lat)
        // }
        // 点击地图获取位置
        map.addEventListener("click", function (e) {
            var lnglat = e.lnglat
            var lng = lnglat.lng
            var lat = lnglat.lat
            // 移除之前的图标
            map.removeOverLay(marker)
            showDiv()
            resulthideDiv()
            // 在点击位置显示图标
            var icon = new T.Icon({
                iconUrl: './weizhi.jpeg',
                iconSize: new T.Point(20, 35),
                iconAnchor: new T.Point(12, 41)
            })
            marker = new T.Marker(new T.LngLat(lng, lat), {
                icon: icon
            })
            map.addOverLay(marker)
            // 将地图中心点移动到点击位置
            map.panTo(new T.LngLat(lng, lat))
            // 显示点击位置的详细地址
            getAddress(lng, lat)
        })

        var config = {
            pageCapacity: 10,	//每页显示的数量
            onSearchComplete: localSearchResult	//接收数据的回调函数
        }
        //创建搜索对象
        localsearch = new T.LocalSearch(map, config)
    }

   // 获取地址信息
    function getAddress(lng, lat) {
        var geocoder = new T.Geocoder()
        geocoder.getLocation(new T.LngLat(lng, lat), function (result) {
            var address = result.getAddress()
            addressdan = result.getAddress()
            lngs = lng
            lats = lat
            addesdname = address
            document.getElementById("addressDiv").innerHTML = `<div class='titl_name'>当前地址：</div>` + address
        })
    }

接下来就是搜索，搜索出来的结果利用js渲染到DOM中，天地图也有演示实例，代码什么的都有，可以自己查看一下天地图API

   let letorlonobj = {
        latitude: '',//维度
        longitude: ''
    }//存一下经纬度，获取距离要用
    
function localSearchResult(result) {
        //清空地图及搜索列表
        clearAll()

        //解析建议词信息
        suggests(result.getSuggests())
    }
function clearAll() {
        map.clearOverLays()
        document.getElementById("result").innerHTML = ""
        document.getElementById("result").style.display = "none"
    }
    //解析建议词信息
    function suggests(obj) {
        if (obj) {
            //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
            var suggestsHtml = "<ul>"
            for (var i = 0; i < obj.length; i++) {
                let lonlatarr = obj[i].lonlat.split(',')
                let km = getDistance(letorlonobj.latitude, letorlonobj.longitude, lonlatarr[1], lonlatarr[0])
                suggestsHtml += ` <li data-lat=${lonlatarr[1]} data-lon=${lonlatarr[0]}>
							<div class='dizhiname' data-lat=${lonlatarr[1]} data-lon=${lonlatarr[0]}>${obj[i].name}</div>
							<div class='dizhichengshi' data-lat=${lonlatarr[1]} data-lon=${lonlatarr[0]}><span>${km}Km</span>${obj[i].address}</div>
							</li>`
            }
            suggestsHtml += "</ul>"
            document.getElementById("result").style.display = "block"
            document.getElementById("result").innerHTML = suggestsHtml
        }
    }

然后计算一下，搜索出来的位置，距离你有多远，我这个是直线距离，不满足需求的可以自己加入别的方法

如有变量缺失自己定义一下即可 

    //计算距离
    /**
 * 通过经纬度获取两点距离
 * @param lat1lng1
 * @param lat2lng2
 * @returns 距离单位 km
 */
    const getDistance = function (lat1, lng1, lat2, lng2) {
        const radLat1 = (lat1 * Math.PI) / 180.0
        const radLat2 = (lat2 * Math.PI) / 180.0
        const a = radLat1 - radLat2
        const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
        let s =
            2 *
            Math.asin(
                Math.sqrt(
                    Math.pow(Math.sin(a / 2), 2) +
                    Math.cos(radLat1) *
                    Math.cos(radLat2) *
                    Math.pow(Math.sin(b / 2), 2)
                )
            )
        s *= 6378.137 // EARTH_RADIUS;
        s = Math.round(s * 100) / 100
        return s // 调用 return的距离单位为km
    }

监听一下input输入框的内容，来进行搜索

let furbol = true

    let input = document.getElementById("keyword")
    input.addEventListener('input', function () {
        hideDiv()
        resultshowDiv()
        localsearch.search(document.getElementById('keyword').value, 4)

    })
    input.addEventListener('focus', function () {
        if (furbol) {
            letorlonobj.latitude = lngss
            letorlonobj.longitude = lataa
            furbol = false
        }

    })


//DOM的显示与隐藏
    function hideDiv() {
        // 隐藏
        document.getElementById("addressDivv").style.display = "none"
    }
    function showDiv() {
        // 显示
        document.getElementById("addressDivv").style.display = "block"
    }
    function resulthideDiv() {
        // 隐藏
        document.getElementById("result").style.display = "none"
    }
    function resultshowDiv() {
        // 显示
        document.getElementById("result").style.display = "block"
    }

 点击搜索出来的列表也需要标点出来，给他加一个点击事件，点击以后把内容传到标点的方法里

  let liarr = document.querySelector('#result')

    liarr.addEventListener('click', (e) => {
        console.log(e.target.dataset)
        dainjiFun(e.target.dataset)
    })


    function dainjiFun(e) {
        var lnglat = e
        var lng = lnglat.lon
        var lat = lnglat.lat
        // 移除之前的图标
        map.removeOverLay(marker)
        // 在点击位置显示图标
        var icon = new T.Icon({
            iconUrl: './weizhi.jpeg',
            iconSize: new T.Point(20, 35),
            iconAnchor: new T.Point(12, 41)
        })
        marker = new T.Marker(new T.LngLat(lng, lat), {
            icon: icon
        })
        map.addOverLay(marker)
        // 将地图中心点移动到点击位置
        map.panTo(new T.LngLat(lng, lat))
        // 显示点击位置的详细地址
        getAddress(lng, lat)
    }

大致就这么多内容Dom自己写一下就行