调用天地图API实现关键词搜索

最新推荐文章于 2024-08-10 13:50:28 发布

weixin_30955341

最新推荐文章于 2024-08-10 13:50:28 发布

阅读量1.3k

点赞数 1

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/lzugis/p/6539760.html

版权

本文介绍如何结合天地图的js API与OpenLayers，实现关键词的搜索与地图上显示。通过调用LocalSearch接口的search方法，可以完成关键词搜索功能。提供了相关代码示例、作者的技术博客、在线教程链接以及联系方式。

摘要由CSDN通过智能技术生成

概述：

本文讲述结合天地图 js API，实现Openlayers中关键词的搜索与展示。

效果：

实现关键：

调用天地图APILocalSearch接口，实现关键词搜索，调用方式为：localsearch.search(keywod)。

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers MapQuest Demo</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <script src=" http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>
    <script src="../../../plugin/jquery/jquery-3.1.1.min.js"></script>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="public_map/TiandituLayer-src.js"></script>
    <script src="extend/LabelMarkers.js"></script>
    <script src="extend/LabelLayer.js"></script>
    <style type="text/css">
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
            font-size: 12.5px;
            font-family:"宋体"
        }
        .search-box{
        	position: absolute;
        	top:10px;
        	left:40%;
        	position: absolute;
        	z-index: 999;
        	padding: 5px;
        	border: 1px solid #ccc;
        	border-radius: 4px;
        	box-shadow: 1px 1px 1px #666;
        	background: #fff;
        }
        .item-list{
            position: absolute;
            top:100px;
            left: 20px;
            z-index: 999;
            border: 1px solid #ccc;
            width: 250px;
            background: #fff;
            display: none;
        }
        .list-close{
            background: url("img/panel_tools.png");
            width: 16px;
            height: 16px;
            float: right;
            margin: 3px 3px;
            background-position: -16px 0px;
        }
        .list-close:hover{
            cursor: pointer;
        }
        .list-title{
            background: #009dda;
            color: #fff;
            padding: 5px 8px;
            font-weight: bold;
        }
        ul{
            list-style: none;
            margin: -0px 0;
        }
        ul li{
            border-bottom: 1px dotted #eee;
            margin-left: -40px;
            margin-top: 5px;
            position: relative;
        }
        ul li:hover{