天地图关键字搜索列表纯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());
}
相关推荐
秦jh_1 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21314 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy15 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法