`
wangminshe89
  • 浏览: 671288 次
文章分类
社区版块
存档分类
最新评论

使用百度地图进行区域搜索与定位

 
阅读更多

注意：1、需要引入：jquery-1.7.1.min.js

2、要在有网络的情况下才能测试，因为引入了百度中的地图地址

地图的CSS样式：

@charset "utf-8";
/* CSS Document */

.map{width:800px;height:404px;text-align:center;float:left;overflow: hidden;}
.map_left{width:601px;float:left;height:380px;border:2px solid #afafaf;}
.map_right{width:193px;float:right;height:380px;border:1px solid #ccc; }
.map_right_bg{width:193px;background:#e4ecf9;height:20px;}
.map_right_top{width:193px;text-align:center;}
.map_right_top_left{float:left;width:90px;height:30px;}
.map_right_top_right{float:right; text-align:left;height:30px;width:90px;}
.map_right_search{width:193px;}
.map_right_search_left{}
.map_right_search_right{}
.map_right_result{width:193px;text-align:left;}

主界面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>标注餐馆的位置</title>
<link rel="stylesheet" type="text/css" href="mark_map.css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src=" http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
<style type="text/css">
.desc{width:100%;hieght:25px;margin:0;padding 0;}
.cityList{height: 320px;width:372px;overflow-y:auto;}
.sel_container{position:absolute;top:0;font-size:12px;}
.map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}
.map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}
.map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
.map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}
</style>
</head>
<body>
<div>
<div id="desc">
<span class="titleClass">标注地理位置</span>(请点击地图右侧的标注按钮，然后在地图上进行标注)
</div>
<div class="map">
<div class="map_left" id="container"></div>
<div class="map_right">
<div class="map_right_bg"></div>
<div class="map_right_top">
<div class="map_right_top_left"><strong id="curCity">北京市</strong></div>
<div class="map_right_top_right">
[<a id="curCityText" href="javascript:void(0)">更换城市</a>]
</div>
<div class="map_popup" id="cityList" style="display:none;text-align: left;">
<div class="popup_main">
<div class="title">城市列表</div>
<div class="cityList" id="citylist_container"></div>
<button id="popup_close"></button>
</div>
</div>

</div>
<div class="map_right_search">
<input type="text" id="search" style="width: 120px;" />
<input type="button" onclick="search()" value="搜索"/>
</div>
<div class="map_right_result" style="height:280px;overflow: auto;">
<div id="results" style="font-size:13px;margin-top:10px;"></div>
</div>
<div style="width:193px;">
<input type="button" value="标注" onclick="mkrTool.open()"/>
<input type="hidden" id="lng" value="<s:property value='#session.res_session.get(\'longitude\')'/>"/>
<input type="hidden" id="lat" value="<s:property value='#session.res_session.get(\'latitude\')'/>"/>
</div>
</div>

</div>
</div>

<script type="text/javascript" >
// 新创建地图
var ox=parseFloat($("#lng").val());
var oy=parseFloat($("#lat").val());
var map = new BMap.Map("container");
var point;
if(ox>0){
point = new BMap.Point(ox, oy);
}else{
point = new BMap.Point(116.404, 39.915);
}

map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();

var mkrTool = new BMapLib.MarkerTool(map, {autoClose: true, followText: "添加标注"});
map.addEventListener("click",function(e){
if(mkrTool._isOpen==true){
var lng=$("#lng").val();
var x=e.point.lng;
var y=e.point.lat;
if(lng.length>0){
if(window.confirm("你已经标注了，确定修改吗？")){
markMap(x,y);
}else{
//alert("你选择了放弃");
mkrTool.close();
}
}else{
markMap(x,y);
}
}

});

function markMap(x,y){
$.post("restaurantAction!resMapMark.do",{posX:x,posY:y},function(data){
if("success"==$.trim(data)){
alert("标注成功");
}else{
alert("标注失败");
}
},'text');
}


// 创建CityList对象，并放在citylist_container节点内
var myCl = new BMapLib.CityList({container : "citylist_container", map : map});

// 给城市点击时，添加相关操作
myCl.addEventListener("cityclick", function(e) {
// 修改当前城市显示
document.getElementById("curCity").innerHTML = e.name;

// 点击后隐藏城市列表
document.getElementById("cityList").style.display = "none";
});

// 给“更换城市”链接添加点击操作
document.getElementById("curCityText").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};

// 给城市列表上的关闭按钮添加点击操作
document.getElementById("popup_close").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};


var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"},
pageCapacity: 8
});

function search(){
var area=$('#search').val();
local.search(area);
}

</script>

</body>
</html>

分享到：
| 苹果+zb的生日+邮票分你一半（DP01背包）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics