您的位置：首页 > Web前端 > JQuery

基于jquery1.4.2的百度地图标点demo-----ajax更改后台地图坐标数据

2015-08-31 21:18 836 查看

总结的之前的一个功能，觉得比较有用，特此保留，如想测试，请自行更改代码中的jquery的地址

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>

<div class="f_companybg t10">
<h3><em>公司地图</em>
<span id="ditu_set" style="cursor:pointer">重新设置标点</span>

<input type="button" value="定位" id="mapsearch_btn" class="g_dw_but"/><input id="mapsearch" type="text" class="g_dw_input"/>
</h3>

<div  id='main_ditu' style="width:600px;height:400px"></div>
<span id="confirm_position" style="cursor:pointer;position:absolute;right:30px;top:56px;background-color:#000;opacity:0.5;filter:alpha(opacity=50);border:1px solid #000000;width:80px;height:24px;line-height:20px;font-weight:bold;font-size:14px;color:#ffffff;padding-left:10px;display:none">确认此位置</span>
<input type='hidden' id='position_lng' value='0'>
<input type='hidden' id='position_lat' value='0'>
</div>
<script>
var Map_val = {
jing:116.348,
wei:39.9822,
ojing:116.348,
owei:39.9822,
map:null,
point:null,
marker:null,
enableMapClick:0,
subflag:0
}
$(document).ready(
function()
{
$.extend(
{
init_map:function()
{
Map_val.map = new BMap.Map("main_ditu");                    // 创建Map实例
Map_val.point = new BMap.Point(Map_val.jing,Map_val.wei);    // 创建点坐标
Map_val.map.centerAndZoom(Map_val.point,15);
if(Map_val.ojing > 0)
{
Map_val.marker = new BMap.Marker(Map_val.point);  // 创建标注
Map_val.map.addOverlay(Map_val.marker);
}
Map_val.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
Map_val.map.disableDoubleClickZoom();
Map_val.map.disableContinuousZoom();
Map_val.local = new BMap.LocalSearch
(
"全国",
{
renderOptions:
{
map: Map_val.map,
autoViewport: true,
selectFirstResult: false
}
}
);
},
markerDragStart:function()
{
$("#confirm_position").slideUp();
return false;
},
markerDragEnd:function(e)
{
$("#position_lng").val(e.point.lng);
$("#position_lat").val(e.point.lat);
$("#confirm_position").slideDown();
return false;
}

}
);

$.init_map();

$("#mapsearch_btn").click(
function()
{
var search_val = $.trim($("#mapsearch").val());
if(search_val)
{
Map_val.local.search(_searchval);
}
}
);

$("#ditu_set").click(
function()
{
Map_val.enableMapClick = 1;
Map_val.map.addEventListener("click",
function(e)
{
if(Map_val.enableMapClick == 0)
{
Map_val.map.removeEventListener("click", this);
return false;
}
//创建标注
if(Map_val.marker)
{
Map_val.map.removeOverlay(Map_val.marker);  //移除旧标注
}
Map_val.point= new BMap.Point(e.point.lng, e.point.lat);
Map_val.marker = new BMap.Marker(Map_val.point);  // 创建标注
Map_val.map.addOverlay(Map_val.marker);           // 将标注添加到地图中
//新添加标注添加事件
Map_val.marker.enableDragging();
Map_val.marker.addEventListener("dragstart",$.markerDragStart);
Map_val.marker.addEventListener("dragend", $.markerDragEnd);

$("#position_lng").val(e.point.lng);
$("#position_lat").val(e.point.lat);
$("#confirm_position").slideDown();

return false;
}
);
Map_val.marker.enableDragging(); //标注拖动激活
Map_val.marker.addEventListener("dragstart",$.markerDragStart);
Map_val.marker.addEventListener("dragend",$.markerDragEnd);
}
);

$("#confirm_position").click(
function()
{
if(Map_val.subflag == 0)
{
Map_val.subflag = 1;
$(this).text("位置确认中");
var plng = $("#position_lng").val();
var plat = $("#position_lat").val();
Map_val.enableMapClick = 0; //禁止点击地图
Map_val.marker.disableDragging();  //禁止拖动标注
if(plng!=0 && plat!=0)
{
//ajax提交数据
}
}
}
);

}
);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航