百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;}

#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}

#r-result{height:100%;width:20%;float:left;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

<title>15.1</title>

</head>

<body>

<div id="l-map"></div>

<div id="r-result">

    <input id="type1" type="radio" name="type" value="single" /><label for="type1">精准查找</label>

    <input id="type2" type="radio" name="type" value="more" checked="checked" /><label for="type2">模糊查找</label><br />

    <input type="button" onclick="reset()" value="重置数据" /></br>

    <input id="keyword" type="text" style="width:150px;" value=""/>

    <input type="button" value="搜索" onclick="search('type','keyword')"/>

</div>

</body>

</html>

<script type="text/javascript">

    //  标注点数组 json

    var BASEDATA = [

        { title: "奥亚酒店", content: "北苑路169号", point: "116.422792|40.009471", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "珀丽酒店", content: "将台西路8号", point: "116.484289|39.97936", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "贵国酒店", content: "左家庄1号", point: "116.454494|39.964011", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "科通酒店", content: "民族园路8号院2号楼", point: "116.394601|39.987925", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "将台酒店", content: "酒仙桥路甲12号", point: "116.496024|39.976864", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "成宏酒店", content: "北四环东路惠新东桥西北侧", point: "116.429445|39.995392", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "华商酒店", content: "延静西里2号", point: "116.488962|39.921939", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "标华酒店", content: "北京市 朝阳区红庙路柴家湾1号", point: "116.489284|39.92104", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "万程酒店", content: "天坛路89号", point: "116.411762|39.89457", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "黎昌酒店", content: "永定门外彭庄乙58号", point: "116.393532|39.876272", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "北京图书馆", content: "北京市海淀区白石桥路39号", point: "116.329593|39.952398", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "海淀图书馆", content: "丹棱街16西门", point: "116.315551|39.984388", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "北京图书馆", content: "北京市西城区文津街附近", point: "116.391713|39.929007", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "首都图书馆", content: "东三环南路88号", point: "116.469899|39.87684", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "国家图书馆", content: "中关村南大街33号", point: "116.331292|39.949031", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "崇文区图书馆", content: "北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内", point: "116.427671|39.903568", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "朝阳区图书馆", content: "北京市朝阳区朝外小庄金台里17号", point: "116.47766|39.922295", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "宣武区图书馆", content: "教子胡同8号", point: "116.374561|39.894302", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "东城区图书馆", content: "交道口东大街85号", point: "116.41927|39.9474", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },

        { title: "西城区图书馆", content: "北京市西城区后广平胡同26号", point: "116.368099|39.942332", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" }

     ]

    //创建和初始化地图函数：

    function initMap() {

        window.map = new BMap.Map("l-map");

        map.centerAndZoom(new BMap.Point(116.412318, 39.887037), 12);

        map.enableScrollWheelZoom();

        map.addControl(new BMap.NavigationControl());

        //创建自定义搜索类

        window.searchClass = new SearchClass();

        searchClass.setData(BASEDATA)

        reset();

    }

    //搜索方法 param{searchTypeRadio_name：搜索radio的名字,keyword_name:搜索文本框的id}

    window.search = function (searchTypeRadio_name, keyword_name) {

        //获取页面dom

        var searchType = document.getElementsByName(searchTypeRadio_name);

        var keyword = document.getElementById(keyword_name).value;

        //获取dom的值

        var isLikeSearch;

        for (var i = 0; i < searchType.length; i++) {

            if (searchType[i].checked) {

                isLikeSearch = searchType[i].value;

            }

        }

        //开始搜索

        searchClass.trim(isLikeSearch) == "" && (t_v = "single"); //去掉搜索关键字的html标签

        var dd = searchClass.search({ k: "title", d: keyword, t: isLikeSearch, s: "" });

        addMarker(dd); //向地图中添加marker

    }

    //重置返回所有结果

    window.reset = function () {

        //s:{''只返回找到的结果|all返回所有的}

        var dd = searchClass.search({ k: "title", d: "显示全部", t: "single", s: "all" });

        addMarker(dd); //向地图中添加marker

    }

    //创建marker

    window.addMarker = function (data) {

        map.clearOverlays();

        for (var i = 0; i < data.length; i++) {

            var json = data[i];

            var p0 = json.point.split("|")[0];

            var p1 = json.point.split("|")[1];

            var point = new BMap.Point(p0, p1);

            var iconImg = new BMap.Icon(json.icon, new BMap.Size(22, 22));

            var marker = new BMap.Marker(point, { icon: iconImg });

            //var iw = createInfoWindow(json);

            var label = new BMap.Label(json.title, { "offset": new BMap.Size(22, 22) });

            marker.setLabel(label);

            map.addOverlay(marker);

            label.setStyle({

                borderColor: "#808080",

                color: "#333",

                cursor: "pointer"

            });

            (function () {

                var _json = json;

                var _iw = createInfoWindow(_json);

                var _marker = marker;

                _marker.addEventListener("click", function () {

                    this.openInfoWindow(_iw);

                });

                _iw.addEventListener("open", function () {

                    _marker.getLabel().hide();

                })

                _iw.addEventListener("close", function () {

                    _marker.getLabel().show();

                })

                label.addEventListener("click", function () {

                    _marker.openInfoWindow(_iw);

                })

                if (!!json.isOpen) {

                    label.hide();

                    _marker.openInfoWindow(_iw);

                }

            })()

        }

    }

    //创建InfoWindow

    function createInfoWindow(json) {

        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");

        return iw;

    }

    //创建一个Icon

    function createIcon(json) {

        var icon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/ico-marker.gif", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowAnchor: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })

        return icon;

    }

    function SearchClass(data) {

        this.datas = data;

    }

    // rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}

    // rule = {k:"名字",d:"搜索关键字",t:{single名字精确查找|more名字模糊匹配查找},s{''只返回找到的结果|all返回所有的}

    SearchClass.prototype.search = function (rule) {

        if (this.datas == null) { alert("数据不存在!"); return false; }

        if (this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == "") { alert("请指定要搜索内容!"); return false; }

        var reval = [];

        var datas = this.datas;

        var len = datas.length;

        var me = this;

        var ruleReg = new RegExp(this.trim(rule.d));

        var hasOpen = false;

        var addData = function (data, isOpen) {

            // 第一条数据打开信息窗口

            if (isOpen && !hasOpen) {

                hasOpen = true;

                data.isOpen = 1;

            } else {

                data.isOpen = 0;

            }

            reval.push(data);

        }

        var getData = function (data, key) {

            var ks = me.trim(key).split(/\./);

            var i = null, s = "data";

            if (ks.length == 0) {

                return data;

            } else {

                for (var i = 0; i < ks.length; i++) {

                    s += '["' + ks[i] + '"]';

                }

                return eval(s);

            }

        }

        for (var cnt = 0; cnt < len; cnt++) {

            var data = datas[cnt];

            var d = getData(data, rule.k);

            if (rule.t == "single" && rule.d == d) {

                addData(data, true);

            } else if (rule.t != "single" && ruleReg.test(d)) {

                addData(data, true);

            } else if (rule.s == "all") {

                addData(data, false);

            }

        }

        return reval;

    }

    SearchClass.prototype.setData = function (data) {

        this.datas = data;

    }

    SearchClass.prototype.trim = function (str) {

        if (str == null) { str = ""; } else { str = str.toString(); }

        return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");

    }

    initMap(); //创建和初始化地图

</script>

百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html的更多相关文章

百度地图Api进阶教程-点击生成和拖动标注4.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
百度地图Api进阶教程-基础地图示例1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
百度地图Api进阶教程-弹出信息窗口5.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
百度地图Api进阶教程-创建标注和自定义标注3.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
百度地图Api进阶教程-默认控件和自定义控件2.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
百度地图Api进阶教程-点聚合9.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
【百度地图API】如何区分地址解析和智能搜索？
原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...

随机推荐

Java获取请求客户端的真实IP地址
整理网友的材料,最后有源码,亲测能解决所有java获取IP真实地址的问题整理的这里: 1.链接1 2.链接2 JSP里,获取客户端的IP地址的方法是: request.getRemoteAddr() ...
hudson用SVN插件下载代码，用ant插件打包，用SSH插件部署
hudson自动化部署步骤 1.SVN插件->下载代码 2.ant插件->war打包 (hudson服务器上可安装多个版本ant,每个项目可以选择一个ant版本.Build File ...
spark-submit的参数名称解析
执行时需要传入的参数说明 Usage: spark-submit [options] <app jar | Python file> [app options] 参数名称含义 --mas ...
不要随便使用 runAllManagedModulesForAllRequests="true" 来解决问题
在 IIS 7.0 中,对于使用 Url 路由访问页面的 ASP.NET 应用程序,IIS可能会不能出 Url 是对 ASP.NET 的请求. 会显示404啊,403啊之类的错误代码(因为路径不存在 ...
Datagrid分页、排序、删除代码
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="fal ...
【Unity】4.2 提升开发效率的捷径--导入 Unity 5.3.4 自带的资源包
分类:Unity.C#.VS2015 创建日期:2016-04-06 一.简介 Unity自带的资源包也称为标准资源包.换言之,Unity自带的所有标准资源包导入到Unity项目中以后,都会放在Pro ...
java集群优化——ORM框架查询优化原理
众所周知,当下的流行的企业级架构中,ORM一直是最基础的部分,在架构设计的底层.对逻辑层提供面向对象的操作支持,而事实总是和我们预想的有所偏差,ORM在提供了较好的操作体验时,也流失了一部分原生SQL ...
JVM源码分析之安全点safepoint
https://blog.csdn.net/iter_zc/article/details/41892567 https://www.jianshu.com/p/c79c5e02ebe6
每日英语：China Bond Trading Dives
SHANGHAI—Trading volume in China's bond market has plummeted in recent months, in another reminder o ...
【Bootloader】bootloader启动过程分析
Boot Loader启动过程分析一. Boot Loader的概念和功能 1.嵌入式Linux软件结构与分布在一般情况下嵌入式Linux系统中的软件主要分为以下及部分: (1)引导加载程序: ...

百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html的更多相关文章

随机推荐

热门专题