前几天,帮朋友做了几款地图API接口调研,推荐他使用百度BMap和谷歌GMap API,后来又直接交由我来替他做
一来上周帮研究生部老师做的学位证书精准打印系统基本完工,晚上有点时间研究下js
二来去年刚到百度实习头1个月,做的正是js,因此对BMap部分源码、API接口风格以及文档也都有些了解
花了一天两夜,基本功能需求都已经实现(自定义标注、精确和模糊查询、个性化添加、右键菜单等),先贴出效果图:

上图布局,最上面是测试通过的浏览器及其版本,左侧是动态加载的数据源和查询功能,右侧则是调用BMap API实现自己的应用
知识拓展:关于js和css的浏览器兼容性问题,请参见我在百度空间的博客 Javascript 和 CSS 的浏览器兼容总结
设计思路:接口是BMap API,内部功能采用模块化设计,搜索模块、自定义添加、右键菜单事件等,这样设计方便扩展和维护,后期将考虑加入谷歌的GMap
下面,详细介绍内部功能是如何设计和实现的
1、数据源格式
数据源格式是比较规整的,具体格式如下:
目前数据源采用的text文本格式进行存储与加载,随着需求和应用的扩大,后期将会使用MySQL数据库进行保存与提取
2、动态加载数据源(左侧table)
左侧动态加载数据源效果图:

3、精准与模糊查询(正则式实现)
4、标记查询的结果
标记效果图:

5、右键菜单的实现
菜单效果图:

6、模糊查询结果

左侧,输入“1”,模糊匹配查询和显示查询结果
右侧,输出3个标记结果
校验:100、101、501三项,都含有查询关键字"1“,查询结果正确
7、关注细节,改善体验
在实现过程中,也考虑了一些细节处理,这里举两个示例
a、输入框自动提示
当用户没有输入时,输入框显示提示信息"input id",当用户鼠标点击后,提示信息自动清除(是不是很像AJAX的水印效果 哈哈)
其实,其内部实现也不复杂,但不经意的设计,体现的却是很人性化
具体实现(onmousedown和onmouseout)
b、左侧查询高亮显示
点击查询小图标后,此栏背景色高亮显示,是用户一目了然

实现代码如下:
好啦,就到这里
后期计划,想把谷歌的地图API也扩展进来,实现百度和谷歌地图自由选择
再有时间的话,将会尝试加入更新、更酷的技术,打造一些HTML5和CSS3高级应用特效
分享到:
相关推荐
百度地图JavaScript API是百度提供的一款强大的地图开发工具,主要用于在网页上实现地图的展示、交互以及自定义功能。离线版3.0主要是为了让开发者在没有网络连接的情况下也能使用地图服务,这对于那些需要在局域网...
通过学习和理解以上知识点,开发者可以充分利用百度地图JavaScript API离线版3.0来构建各种离线地图应用,如导航系统、地理信息系统、房产查询等,即使在网络条件不佳的情况下也能提供可靠的地图服务。
在本文中,我们将深入探讨如何使用MFC(Microsoft Foundation Class)中的WebBrowser控件来调用百度地图API,实现地图功能的集成。首先,我们理解MFC是一个C++库,它为Windows应用程序开发提供了一套丰富的类库,...
在draw方法中,遍历坐标点,利用百度地图API提供的绘图方法(如`new BMap.Polyline()`)连接这些点,并设置线型为虚线。 4. **动态回放**:如果需要实现运动轨迹的动态回放,可以使用定时器(`setInterval`)来每隔...
这通常涉及解析轨迹数据(例如GPS坐标),然后使用百度地图API的`BMap.Polyline`类创建折线对象,将一系列坐标点连接起来,形成轨迹线。 - 轨迹数据可以是JSON格式,包含一系列的经纬度坐标对,如`[ [lng1, lat1], ...
这个"百度地图JavaScriptAPI离线版.zip"文件包含了一整套用于离线环境使用的API资源,对于那些网络不稳定或者需要在无网络环境下使用地图功能的应用来说非常有用。 首先,我们来详细了解一下百度地图JavaScript API...
ASP.NET调用百度地图API实例是一个典型的Web应用开发案例,主要涉及了两个核心技术:ASP.NET框架和百度地图API。这个实例中,开发者利用ASP.NET的网页编程能力结合百度地图的JavaScript API,实现了动态地在网页上...
本文将深入探讨如何使用百度地图API创建地图应用,包括其基本概念、功能以及在实际项目中的应用。百度地图API是百度提供的一套强大的Web服务接口,它允许开发者在其网站或应用中嵌入地图功能,实现各种地图相关的...
**百度地图API应用实例说明文档** 本文档将详细介绍如何使用百度地图API进行应用程序开发,尤其适合那些希望在手机应用中集成百度地图功能的开发者。百度地图API提供了丰富的地图展示、定位、路线规划等功能,使得...
在使用百度地图API进行开发时,自定义地图图层是一项重要的功能,它允许开发者根据自己的需求展示特定的数据或视觉效果。下面将详细讲解如何利用百度地图API实现自定义地图图层,以及如何添加标记、搜索自定义标记...
标题与描述中的“百度地图API实例”主要涉及的是如何在网页中嵌入并利用百度地图API来实现地图显示、标记点、信息窗体以及事件监听等功能。以下是对这些知识点的详细解析: ### 百度地图API简介 百度地图API是一套...
在百度地图Web API中,我们可以使用`BMap.CenterAndZoom`方法来设置地图的中心点和缩放级别。例如,如果我们有坐标点(lat, lng),可以这样设置: ```javascript var map = new BMap.Map("container"); map.center...
在这个过程中,我们首先需要理解百度地图API的使用,以及如何在Vue项目中集成BMap百度地图API来实现即时搜索功能。以下是详细知识点: 1. 百度地图API的申请和使用 要使用百度地图的即时搜索功能,开发者需要先在...
在本文中,我们将深入探讨如何使用百度地图API与JavaScript进行集成,以便在Web应用程序中实现地图功能。首先,我们需要理解什么是API(Application Programming Interface),它是一组预定义的函数、类和协议,允许...
- **绘制轨迹**:使用百度地图API的`BMap.Polyline`类创建折线对象,将轨迹点作为参数传入,然后添加到地图实例上。 - **计算里程**:通过计算轨迹点之间的距离,累加得到总里程。可以使用Haversine公式或者其他空间...
在开发Web应用时,我们经常需要在地图上展示地理位置信息,这时百度地图API就成为了一个强大的工具。本文将深入探讨如何使用百度地图API显示多个标注点,并结合jQuery库来优化用户体验。 首先,百度地图API(Baidu ...
1. **BMap对象**:BMap是百度地图JavaScript API的核心对象,通过它我们可以创建地图实例,设置地图的中心点、缩放级别等属性。例如,`new BMap.Map("container")` 创建了一个新的地图实例,其中"container"是地图...
百度地图是中国领先的在线地图服务提供商之一,为开发者提供了丰富的API接口,使得在网页或应用程序中集成地图功能变得轻松易行。本资源包含百度瓦片地图的部分数据,以及可能的API接口文档,适用于离线地图场景或者...
**百度地图JS API Demo详解** 在现代Web应用中,地图服务已经成为不可或缺的一部分,...在实际开发中,记得根据项目需求选择合适的功能,优化性能,同时遵循百度地图API的使用规范,以确保服务的稳定性和用户体验。
1. **初始化地图**:在使用百度地图API时,第一步通常是创建地图实例。通过指定容器ID(如div元素的id)和地图的中心点坐标,我们可以加载一个基本的地图视图。例如: ```javascript var map = new BMap.Map(...