天地图关键字搜索列表纯js版本

先看效果

1.引入脚本

html 复制代码
 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=key"></script>

2.html部分

html 复制代码
<div class="form-group">
    <label class="col-sm-3 control-label">选取坐标</label>
    <div class="col-sm-9">
        <div id="container" class="map"></div>
        <div class="search" style="z-index: 999; opacity: 0.6;">
            <input id="complete" type="text" placeholder="输入您要定位的地址"  style="width:70%;"/>
            <button type="button" class="btn" onClick="localsearch.search(document.getElementById('complete').value,7)">搜索</button>

            @*<div class="list-group">  此处用到 Bootstrap
                <button type="button" class="list-group-item">Cras justo odio</button>
            </div>*@

        </div>
    </div>

</div>

3.js部分 初始化地图中心点 搜索对象 点击地图事件

javascript 复制代码
var autocomplete;
var localsearch;
var tianditumap;

function ontiandituLoaded() {
    // 初始化天地图地图
    tianditumap = new T.Map('container', {
        projection: 'EPSG:3785'
    })
    // 中心点和初始化级别
    // 如果是编辑设备, 则设置原站点的坐标为中心点, 否则不设置, 默认
    //if (g_info.isEdit === true) { alert("zj"); alert(g_info.LONG); map.centerAndZoom(new T.LngLat(g_info.LONG, g_info.LAT), 12); }
    //else { alert("bj"); map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); }
    tianditumap.centerAndZoom(new T.LngLat(114.42594, 30.4555), 15);
    
    var Searchconfig = {
        pageCapacity: 5,	//每页显示的数量
        onSearchComplete: localSearchResult	//接收数据的回调函数
    };
    //创建搜索对象
    localsearch = new T.LocalSearch(tianditumap, Searchconfig);
   
    // 地图点击事件
    tianditumap.addEventListener("click", (e) => {
        setLocationInputVal(e.lnglat);
    });
}
  1. js部分 搜索回调方法 和点击定位
javascript 复制代码
function localSearchResult(result) {
    let obj = result.getPois();
    if (obj) {
        //坐标数组,设置最佳比例尺时会用到
        var zoomArr = [];
        var divMarker = document.createElement("div");
        divMarker.className = "list-group";
        obj.forEach((item) => {
            var buttont1 = document.createElement("button");
            buttont1.type = "button";
            buttont1.className = "list-group-item";
            buttont1.innerHTML = item.name; 

            //创建标注对象
            var winHtml = "名称:" + item.name + "<br/>地址:" + item.address;
            let lnglat = new T.LngLat(item.lonlat.split(",")[0], item.lonlat.split(",")[1]);

            var marker = new T.Marker(lnglat);
            //地图上添加标注点
            tianditumap.addOverLay(marker);
            //注册标注点的点击事件
            var markerInfoWin = new T.InfoWindow(winHtml, { autoPan: true });
            marker.addEventListener("click", function () {
                marker.openInfoWindow(markerInfoWin);
            });

            buttont1.onclick = function () {
                let markerInfoWin = new T.InfoWindow(winHtml, { autoPan: true });
                marker.openInfoWindow(markerInfoWin);
            }
            divMarker.appendChild(buttont1);
            zoomArr.push(lnglat);
        });
        //显示地图的最佳级别
        tianditumap.setViewport(zoomArr);
        document.getElementsByClassName("search")[0].appendChild(divMarker);
       
    }
}

// 设置坐标输入框数据
function setLocationInputVal(location) {
    $('#input_long_id').val(location.getLng());
    $('#input_lat_id').val(location.getLat());
}
相关推荐
2401_882727579 分钟前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
会发光的猪。43 分钟前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安1 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼1 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六2 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui