百度地图，搜索功能，地图的高级引用
需要参考的官方文档
百度地图API实例
http://developer.baidu.com/map/jsdemo.htm#c2_8
JSAPI类参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b0
URI/API/WEB
http://lbsyun.baidu.com/index.php?title=uri/api/web
源码位置:
http://download.csdn.net/detail/fulq1234/9843347
用到的知识点:
1.ip定位
getCurrentPosition
2.创建标注
addOverlay
3.点击事件
marker.addEventListener("click",function(){});
4.
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map,
panel:"r-result"
}
});
5.setResultsHtmlSetCallback(callback: Function):设置结果列表创建后的回调函数
1.实体店地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control" />
<meta content="no-cache" http-equiv="pragma" />
<meta content="0" http-equiv="expires" />
<meta content="telephone=no, address=no" name="format-detection" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
<link rel="stylesheet" type="text/css" href="static/css/all.css" />
<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
<title>实体店地图</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>
<script type="text/javascript">
var markerArr = [];/**所有实体店的信息*/
var map;/*地图*/
var location_point = {};/*当前位置*/
$(function(){
/*地图初始化,得到参数location_point*/
initMap();
});
/*初始化地图*/
function initMap(){
/*1.初始化百度地图*/
map = new BMap.Map("container"); //创建地图容器
var point = new BMap.Point(116.404, 39.915); //创建一个点
map.centerAndZoom(point, 15); //设立中心点和地图级别，就是初始化地图
map.enableScrollWheelZoom(true);//可以缩放
/*2.根据浏览器定位*/
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
/*定位成功后的操作*/
location_point.lng = r.point.lng;
location_point.lat = r.point.lat;
/*实体店操作*/
storeList();
/*通过经纬度获取中心位置和缩放级别*/
var c_arr = getCenter();
/*重新整理，地图，添加当前位置的点，还有所有实体店的点*/
againMap(c_arr);
}
else {
alert("定位失败,"+this.getStatus());
}
},{enableHighAccuracy: true});
/*关于状态码
BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
*/
}
/*列出所有实体店*/
function storeList(){
markerArr.push({"latitude":"38.026503763345","longitude":"114.53289913948","name":"宜家玩具","address":"河北省石家庄市长安区1"});
markerArr.push({"latitude":"38.021503763345","longitude":"114.54289913948","name":"红星美凯龙","address":"河北省石家庄市长安区2"});
markerArr.push({"latitude":"38.022503763345","longitude":"114.55289913948","name":"永辉超市","address":"河北省石家庄市长安区3"});
}
/*得到中心点，和缩放*/
function getCenter(){
var maxJ=location_point.lng;/*最大经度*/
var minJ=10000;/*最小经度*/
var maxW=location_point.lat;/*最大维度*/
var minW=10000;/*最小维度*/
for(var i = 0;i<markerArr.length;i++){
var longitude = markerArr[i].longitude;
var latitude = markerArr[i].latitude;
if(maxJ<parseFloat(longitude)){
maxJ=longitude;
}
if(minJ>parseFloat(longitude)){
minJ=longitude;
}
if(maxW<parseFloat(latitude)){
maxW=latitude;
}
if(minW>parseFloat(latitude)){
minW=latitude;
}
}
var arr=this.getCenterPoint(maxJ,minJ,maxW,minW);
return arr;
}
/*重新整理地图
@param c_arr:数组，0：中心经度；1：中心维度；2：缩放级别
*/
function againMap(c_arr){
/*-1：设置地图中心点*/
var point = new BMap.Point(c_arr[0], c_arr[1]);
/*2：初始化地图,设置中心点坐标和地图级别。*/
map.centerAndZoom(point, c_arr[2]);
/*3.加载地图的点*/
reloadMap();
}
/*重新刷新地图,加载实体店的点*/
function reloadMap(){
/*清空覆盖物，主要是为了清空路线*/
map.clearOverlays();
/*添加当前坐标*/
var pt = new BMap.Point(location_point.lng, location_point.lat);
var myIcon = new BMap.Icon("static/images/ori.png", new BMap.Size(27,27));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); /* 创建标注*/
map.addOverlay(marker2); /* 将标注添加到地图中*/
marker2.addEventListener("click", function () {
$("#ainfo").hide();
});
/*添加实体店的点*/
for(var i = 0;i<markerArr.length;i++){
var lng = markerArr[i].longitude;
var lat = markerArr[i].latitude;
/*图标，带数字*/
var myIcon = new BMap.Icon("static/images/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25) ,
imageOffset: new BMap.Size(0, 0 - i * 25)
});
var marker = new BMap.Marker(new BMap.Point(lng, lat), { icon: myIcon }); /*创建点*/
map.addOverlay(marker); /*增加点*/
/*
捕获标记点击事件，并且显示信息
函数闭包，总是执行*/
(function () {
var infoWindow = new BMap.InfoWindow(i);/*为了是传递值 */
marker.addEventListener("click", function () {
/*this.openInfoWindow(infoWindow);这里不弹出标注*/
var cI = infoWindow.getContent();
$("#i_index").val(cI);
var store_name = markerArr[cI].name;
$(".store_name_map").html(store_name);
$(".store_address_map").html(markerArr[cI].address);
$("#ainfo").show();
});
})();
}
}
/*
通过经纬度获取中心位置和缩放级别
@param maxJ:最大经度
@param minJ:最小经度
@param maxW:最大维度
@param minW:最小维度
@return array 返回数组，0：中心经度；1：中心维度；2：缩放级别
*/
function getCenterPoint(maxJ,minJ,maxW,minW){
if(maxJ==minJ&&maxW==minW)return [maxJ,maxW,12];
var diff = maxJ - minJ;
if(diff < (maxW - minW))diff = maxW - minW;
diff = parseInt(10000 * diff)/10000;
var centerJ = minJ*1000000+1000000*(maxJ - minJ)/2;
var centerW = minW*1000000+1000000*(maxW - minW)/2;
var zoom = this.getRoom(diff);
return [centerJ/1000000,centerW/1000000,zoom];
}
/*根据经纬度的距离获取地图的缩放级*/
function getRoom(diff){
var room = new Array(0, 1, 2, 3, 4, 5, 6,7,8, 9, 10, 11, 12, 13, 14);
var diffArr = new Array(360,180,90,45,22,11,5,2.5,1.25,0.6,0.3,0.15,0.07,0.03,0);
for(var i = 0; i < diffArr.length; i ++){
if((diff - diffArr[i]) >= 0){
room[i]=room[i];//增加放大
return room[i];
}
}
return 15;
}
/*显示线路*/
function line(){
var r=confirm("显示线路 ")
if (r==true)
{
/*1.起点*/
var p1 = new BMap.Point(location_point.lng,location_point.lat);
/*2.终点,目标实体店的经纬度*/
var i_index = $("#i_index").val();
var pObj = markerArr[parseInt(i_index)];
var p2 = new BMap.Point(pObj.longitude,pObj.latitude);
driving_route(p1,p2);
}
}
/*
根据起点和终点的经纬度，查询驾车路线
@p1:起点，举例:var p1 = new BMap.Point(116.301934,39.977552);
@p2:终点
*/
function driving_route(p1,p2){
/*重新加载地图的点,为了是去掉旧的路线*/
reloadMap();
/* 百度地图API功能*/
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p1, p2);
}
</script>
</head>
<body style="padding-bottom: 50px;">
<!-- 地图 -->
<div style="width: 369px; height: 585px; border: 1px solid gray" id="container"></div>
<a href="#" class="store_map_content web-left-center" style="display:none;" id="ainfo">
<div class="store_map_box">
<div class="store_name_map">
百草味（和平东路店）
</div>
<div class="store_address_map">
河北省石家庄市长安区1
</div></div><input type="hidden" id="i_index" value="0"/><!--下标--><div class="store_map_dh"><img src="static/images/dh.png" οnclick="line()"/></div></a></body></html>
显示效果
选择地图的数字点，在下方，会出现一个显示具体内容的框，
选择红色图标，会提示，“显示路线"
2,添加地址的地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control" />
<meta content="no-cache" http-equiv="pragma" />
<meta content="0" http-equiv="expires" />
<meta content="telephone=no, address=no" name="format-detection" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
<link rel="stylesheet" type="text/css" href="static/css/all.css" />
<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
<script type="text/javascript">
var map;/*地图*/
var location_point = {};/*当前位置*/
$(function(){
initMap();
});
/*地图初始化*/
function initMap(){
// 百度地图API功能
map = new BMap.Map("container");
/*定位*/
fixedPosition();
}
/*如果初始化没有经纬度，就需要定位*/
function fixedPosition(){
// 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);//可以缩放
/*定位当前地址*/
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
/*定位成功后的操作*/
location_point.lng = r.point.lng;
location_point.lat = r.point.lat;
map.panTo(new BMap.Point(location_point.lng, location_point.lat));
/*添加当前坐标*/
var pt = new BMap.Point(location_point.lng, location_point.lat);
var myIcon = new BMap.Icon("static/images/ori.png", new BMap.Size(27,27));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); /* 创建标注*/
map.addOverlay(marker2); /* 将标注添加到地图中*/
}
else {
mylayer.BtnTip("定位失败,"+this.getStatus());
}
},{enableHighAccuracy: true});
}
/*查询*/
function doSearch(){
var keyword = $("#keyword").val();
if(!keyword){
mylayer.BtnTip("请输入地址");
return false;
}
searchOper(keyword);
}
function searchOper(keyword){
/*清空覆盖物，主要是为了清空路线*/
map.clearOverlays();
/*如果没有回传值，就定位到当前位置*/
map.panTo(new BMap.Point(location_point.lng, location_point.lat));
/*添加当前坐标*/
var pt = new BMap.Point(location_point.lng, location_point.lat);
var myIcon = new BMap.Icon("static/images/ori.png", new BMap.Size(27,27));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); /* 创建标注*/
map.addOverlay(marker2); /* 将标注添加到地图中*/
/*
panel:结果列表显示位置
*/
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map,
panel:"r-result"
}
});
/*设置每页容量，取值范围：1 - 100，对于多关键字检索，每页容量表示每个关键字返回结果的数量（例如当用2个关键字检索时，实际结果数量范围为：2 - 200）。此值只对下一次检索有效*/
local.setPageCapacity(10);
/*
setResultsHtmlSetCallback(callback: Function):设置结果列表创建后的回调函数
*/
local.setResultsHtmlSetCallback(function(result){
/*返回最近一次检索的结果*/
var data = local.getResults();
$.each($("ol li"),function (index,domEle){
/*删除电话一行*/
$(this).find("div div").each(function(){
var bs = $(this).find("b").text();
if(bs == "电话:"){
$(this).remove();
}
});
/*删除详情*/
$(this).find("a").each(function(){
if($(this).text() == "详情»"){
$(this).remove();
}
});
/*搜索结果的单行的点击事件*/
$(this).bind("click",function(){
var thisObj = data.ur[index];
if(thisObj){
var longitude;
var latitude;
if(thisObj.point){
longitude = thisObj.point.lng;
latitude = thisObj.point.lat;
}
var address = thisObj.address;
var province = thisObj.province;
var city = thisObj.city;
/*标题*/
alert(thisObj.title);
}
});
});/*$.each end*/
});
local.search(keyword);
}
</script>
</head>
<body>
<body style="padding-bottom: 50px;">
<div class="home_content">
<div class="search_content">
<input type="text" id="keyword" value="" class="home_search" placeholder="搜索" style="width:90%"/>
<a style="font-size: 14px;" οnclick="doSearch()">搜索</a>
</div>
</div>
<!-- 地图 -->
<div style="width: 369px; height: 385px; border: 1px solid gray" id="container"></div>
<!--结果面板-->
<div id="r-result" style="height:200px;"></div>
</body>
</body>
</html>显示效果
初始，会显示自己当前位置
搜索”超市“，会显示相应的超市。
这里有所改进的地方是：
显示面板，把详情和电话，去掉了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
