使用百度地图LBS创建自定义标注
<body>
<div id="allmap"></div>
<div class="sel_container" id="getCurrentPosition">
<strong >定位中...</strong>
</div>
<div id="r-result"></div> <script type="text/javascript">
window.onload = loadJScript; //异步加载地图
var map;
var arrayMK = new Array();
var arrayInfo = new Array();
var arrayPoint = new Array(); function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L&callback=init";
document.body.appendChild(script);
}
function init() {
map = new BMap.Map("allmap");
map.centerAndZoom("深圳", 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //启用滚轮放大缩小
$("#getCurrentPosition").show();
var geol = new BMap.Geolocation();
geol.getCurrentPosition( //浏览器定位，异步执行
function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
$("#getCurrentPosition").hide();
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件，默认位于地图右上方
map.addControl(new BMap.GeolocationControl()); //添加定位控件，针对移动端开发，默认位于地图左下方
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));//添加缩放平移控件 /*创建定位标注*/
var mk = new BMap.Marker(r.point);// 创建标注
map.addOverlay(mk);// 将标注添加到地图中
/*创建定位标注文本*/
var label1 = new BMap.Label("您在这里",{offset:new BMap.Size(20,-10)});
mk.setLabel(label1); /*创建检索*/
var local = new BMap.LocalSearch(//检索构造函数
map, //检索区域,可为地图实例、坐标点或城市名称的字符串
{
renderOptions : {
map : map,
panel: "r-result",
selectFirstResult: false,//是否选择第一个检索结果
autoViewport: false//检索结束后是否自动调整地图视野
}
}
);
local.search(//根据检索词检索
"影儿", //支持多关键字的数组，最多支持10个关键字
{
forceLocal:true,//否将搜索范围约束在当前城市
customData : {//检索 LBS云服务的数据
geotableId : 137759
}
}
);
} else {
alert('定位失败！' + this.getStatus());
}
},
{
enableHighAccuracy : true //是否启动高精度定位
}
);
}
</script>
</body>
将数据存入LBS数据库中可以在页面用非常简单的几行代码就可以将自己的数据展示在地图上，这样会自动生成标注，信息窗，搜索结果列表，还会自动分页，实现地图标注与结果列表联动，非常方便。
但也有一个缺点，那就是不能在结果列表中显示自定义字段，只能显示标题和地址，如果想显示电话就不行了（也可能是我没找到方法）。
而百度地图也提供了接口让我们获取数据，然后自己处理这些数据，这就使得我们能仿照百度地图的方式来生成标注，信息窗，搜索结果列表，实现分页，地图标注与结果列表联动，还能在结果列表中显示自定义字段。
<body>
<div id="allmap"></div>
<div class="sel_container" id="getCurrentPosition">
定位中...
</div>
<div id="pageLink">
<div>
</div>
</div>
<div id="myResult">
<ol>
</ol>
</div>
<div id="r-result">
</div> <script type="text/javascript">
var map;
var currentPosition;//定位位置
var arrayMK = [];//标注列表
var arrayInfo = [];//信息窗列表
var arrayPoint = [];//位置列表
var searchOption = {
radius: 100000, //检索范围半径
page_index: 0,
page_size: 10,
ak: "dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L" ,//密钥
geotable_id: "137759" ,//LBS表ID
sortby: "distance:1"//按距离排序
}; $(function(){
loadJScript();
});
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L&callback=init";
document.body.appendChild(script);
}
function init() {
map = new BMap.Map("allmap");
map.centerAndZoom("深圳", 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //启用滚轮放大缩小
$("#getCurrentPosition").show();
var geol = new BMap.Geolocation();
geol.getCurrentPosition( //浏览器定位，异步执行
function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.setCenter(r.point);
$("#getCurrentPosition").hide();
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件，默认位于地图右上方
map.addControl(new BMap.GeolocationControl()); //添加定位控件，针对移动端开发，默认位于地图左下方
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));//添加缩放平移控件
currentPosition = r.point;
makercurrentPosition(currentPosition);
searchOption.location = r.point.lng+','+r.point.lat;
getMakerData(0);// 获取检索数据第一页 } else {
alert('定位失败！' + this.getStatus());
}
},
{
enableHighAccuracy : true //是否启动高精度定位
}
);
}
function makercurrentPosition(point){// 创建定位标注
var maker = new BMap.Marker(point);
var label = new BMap.Label("您在这里",{offset:new BMap.Size(20,-10)});
maker.setLabel(label);
map.addOverlay(maker);// 将标注添加到地图中
}
function gotoPage(pageIndex){
map.clearOverlays();
$("#myResult ol").empty();
$("#pageLink div").empty();
makercurrentPosition(currentPosition);
getMakerData(pageIndex);
}
function getMakerData(pageIndex){// 获取检索数据
searchOption.page_index = pageIndex;
$.ajax({
type: 'get',
contentType: "application/json; charset=utf-8",
url: "http://api.map.baidu.com/geosearch/v3/nearby",
dataType: 'jsonp',
data: searchOption,
success:function(result){
var pageTotal = Math.ceil(result.total / searchOption.page_size);
if(pageTotal>1){//分页
if(pageIndex!=0){
$("#pageLink div").append('<span><a href="javascript:void(0)" onclick="gotoPage('+(pageIndex-1)+');">上一页</a></span>');
}else{
$("#pageLink div").append('<span>上一页</span>');
}
for (var i = 0; i < pageTotal; i++) {
if(pageIndex == i){
$("#pageLink div").append('<span>'+(i+1)+'</span>');
}else{
$("#pageLink div").append('<span><a href="javascript:void(0)" onclick="gotoPage('+i+');">'+(i+1)+'</a></span>');
}
}
if(pageIndex!=pageTotal-1){
$("#pageLink div").append('<span><a href="javascript:void(0)" onclick="gotoPage('+(pageIndex+1)+');">下一页</a></span>');
}else{
$("#pageLink div").append('<span>下一页</span>');
}
}
//清空历史数据
arrayMK = [];
arrayInfo = [];
arrayPoint = [];
var store = result.contents;
for (var i = 0; i < store.length; i++) {
createMaker(store[i],i);// 创建检索结果标注
}
resultClickEvent();//结果列表注册单击事件
}
});
}
function resultClickEvent(){//结果列表注册单击事件
$("#myResult ol li").live("click", function(){
$(".info").removeClass("active");
$(this).find(".info").addClass("active");
var serialNo =$(this).find(".serialNo").text();
arrayMK[serialNo].openInfoWindow(arrayInfo[serialNo],arrayPoint[serialNo]); //开启信息窗口
});
}
function getIcon(num){// 创建标注图片（A-J，共10个）
var icon = new BMap.Icon(
"http://api.map.baidu.com/images/markers.png",
new BMap.Size(23, 25),//标注区域大小
{
imageOffset:new BMap.Size(0, -25*num),//可视区域的偏移值，等同于 CSS 中的background-position 属性
anchor: new BMap.Size(9.5, 25),//标注图片锚点位置
infoWindowAnchor: new BMap.Size(10, 0)//信息窗口锚点位置
}
);
return icon;
}
function createMaker(store,num){// 创建检索结果标注
var shadow = new BMap.Icon(//标注阴影
"http://api0.map.bdimg.com/images/marker_red_sprite.png",
new BMap.Size(20, 11),
{imageOffset:new BMap.Size(-19, -23)}
);
var point0 = new BMap.Point(store.location[0], store.location[1]);
var marker0 = new BMap.Marker(point0, {
icon : getIcon(num),//标注图片
shadow : shadow//标注阴影
}); // 创建标注
map.addOverlay(marker0); // 将标注添加到地图中 var opts = {
width : 0, // 信息窗口宽度
height: 0, // 信息窗口高度
title : '<p class="infoWindowTitle" >'+store.title+'</p>', // 信息窗口标题
enableMessage:true, //设置允许信息窗发送短息
message:"xxx"
}
var infoWindow0 = new BMap.InfoWindow('<p class="infoWindowContent" >地址：'+store.address+'<br/>电话：'+store.phoneNumber+'</p>', opts); // 创建信息窗口对象
var newli = $('<li><span class="icon"> </span><div class="info"><div class="title"><span></span></div><div class="address"><b>地址:</b><span></span></div><div class="phoneNumber"><b>电话:</b><span></span></div><p class="serialNo" hidden="hidden"></p></div></li>').appendTo($("#myResult ol"));
newli.attr("id",num);
newli.find(".icon").css({ background:"url(http://api.map.baidu.com/images/markers.png) -23px "+ (-25*num) + "px no-repeat" });
newli.find(".title").find("span").html(store.title);
newli.find(".address").find("span").html(store.address);
newli.find(".phoneNumber").find("span").html(store.phoneNumber);
marker0.addEventListener("click", function(){ //标注注册单击事件
marker0.openInfoWindow(infoWindow0,point0); //开启信息窗口
$(".info").removeClass("active");
newli.find(".info").addClass("active");
});
newli.find(".serialNo").text(num);
arrayMK.push(marker0);
arrayInfo.push(infoWindow0);
arrayPoint.push(point0);
} </script>
</body>
由于能从LBS获取json数据，我们就可以按照我们自己想要的方式处理结果。
而如果不想使用LBS，而是想使用自己的数据库存储数据，虽然LBS也提供接口让我们能管理LBS上的数据，但这样能更方便的对数据进行修改，那么我们只要在后台返回类似格式的json数据就行了。
参考：http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.active{
background-color: rgb(240, 240, 240);
}
#myResult{
font-stretch: normal;font-size: 12px; line-height: normal; font-family: arial, sans-serif; border: 1px solid rgb(153, 153, 153);background: rgb(255, 255, 255);
}
#myResult ol{
list-style: none; padding: 0px; margin: 0px;
}
#myResult ol li{
margin: 2px 0px; padding: 0px 5px 5px 0px; cursor: pointer; overflow: hidden; line-height: 17px;
}
#myResult ol li .info{
zoom: 1; overflow: hidden; padding: 0px 5px;
}
#myResult ol li .icon{
width:19px;height:25px;cursor:pointer;float:left;*zoom:1;overflow:hidden;margin:2px 3px 0 5px;*margin-right:0px;display:inline;
}
#myResult ol li .info .title{
padding:0;line-height:20px;font-size:12px;
}
#myResult ol li .info .title span{
color:#00c;
}
#myResult ol li .info .address,#myResult ol li .info .phoneNumber{
padding:2px 0;line-height:18px;*zoom:1;overflow:hidden;
}
#myResult ol li .info .address b,#myResult ol li .info .phoneNumber b{
float:left;font-weight:bold;*zoom:1;overflow:hidden;padding-right:5px;*margin-right:-3px;
}
#myResult ol li .info .address span,#myResult ol li .info .phoneNumber span{
color:#666;display:block;zoom:1;overflow:hidden;
}
#allmap {
width: 100%;
height: 400px;
}
.infoWindowTitle{
width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden;
}
.infoWindowContent{
font: 12px arial,sans-serif;margin:10px 0;
}
#pageLink{
white-space: nowrap; text-align: right; margin-top: 5px; padding: 2px; overflow: hidden; zoom: 1; background: rgb(229, 236, 249);
}
#pageLink div{
float: left; margin-right: 5px;padding:0;white-space:nowrap
}
#pageLink div span{
margin-right:3px;
}
#pageLink div span a{
color:#7777cc;
}
p {
margin-left: 5px;
font-size: 14px;
} .sel_container {
z-index: 9999;
font-size: 14px;
font-weight:bold;
position: absolute;
right: 0px;
top: 0px;
/* width: 150px; */
background: rgba(255, 255, 255, 0.8);
height: 20px;
line-height: 20px;
padding: 0px;
display:none
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
style & script
使用百度地图LBS创建自定义标注的更多相关文章
- 百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）
百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度) <%@ Page Language="C#" AutoEventWireup="true&qu ...
- 【百度地图API】自定义可编辑的交通路线
原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘 ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- javascript百度地图添加一个普通标注点（2014-3-8 记）
1.导入jquery.js文件:<script type="text/javascript" src="js/jquery.js"></scr ...
- HTML5结合百度地图API创建地图应用
具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...
- 百度地图LBS应用开发代码
最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo, ...
- Android应用中使用百度地图API并加入标注（一）
网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就须要 ...
- Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- js调用百度地图API创建地图，搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
随机推荐
- Zookeeper简介及使用
一.Zookeeper简介 1.zookeeper简介 动物管理员 Apache ZooKeeper致力于开发和维护开源服务器,实现高度可靠的分布式协调. 2.什么是ZooKeeper? ZooKee ...
- RESTful API 设计最佳实践【转】
背景 目前互联网上充斥着大量的关于RESTful API(为了方便,后面API和RESTful API 一个意思)如何设计的文章,然而却没有一个“万能”的设计标准:如何鉴权?API格式如何?你的API ...
- 【我的Android进阶之旅】Android目录过长造成错误：Failed to crunch file abc_textfield_search_activated_mtrl_alpha.9.png
一.编译异常描述 一大早来开发一个新的需求,拉取了一个新的分支,然后导入Android Studio之后,编译就报错了,报错如下所示: 错误具体日志如下所示: Information:Gradle t ...
- SoftReference、WeakReference、PhantomRefrence分析和比较
级别 什么时候被垃圾回收 用途 生存时间 强引用 从来不会 对象的一般状态 JVM停止运行时终止 软引用 在内存不足时 优化内存使用 内存不足时终止 弱引用 在垃圾回收时 对象缓存 gc运行后终止 虚 ...
- sql server数据库状态监控
sql server数据库监控 转自:https://www.cnblogs.com/seusoftware/category/500793.html 6. SQL Server数据库监控 - 如 ...
- JQuery能够高效地操作页面元素
关于DOM和CSS的页面元素选择: $("span"); //全部span元素 $("#elem"); //id为elem的元素 $(".c ...
- Spark2.0机器学习系列之12： 线性回归及L1、L2正则化区别与稀疏解
概述 线性回归拟合一个因变量与一个自变量之间的线性关系y=f(x). Spark中实现了: (1)普通最小二乘法 (2)岭回归(L2正规化) (3)La ...
- 安装pip环境以及pip常用命令使用
1.去到Python的官网下载pip包,下载地址是:https://pypi.python.org/pypi/pip#downloads 2.下载完成之后,解压到一个文件夹,用CMD控制台进入解压目录 ...
- cnn for qa
最近在做QA系统,用tensorflow做了些实验,下面的的是一个cnn的评分网络.主要参考了<APPLYING DEEP LEARNING TO ANSWER SELECTION: A STU ...
- Linux系统——VMware克隆
克隆VMware 1. 关闭防火墙 2. 关闭selinux 3. 删除UUID和Mac地址 4.清空网卡缓存 5.关机 ===================== 关闭防火墙 #service ip ...