jquery 实现百度地图类型控件

最新推荐文章于 2022-05-31 09:48:54 发布

zhangqihua0

最新推荐文章于 2022-05-31 09:48:54 发布

阅读量4.3k

点赞数 1

分类专栏： jquery 文章标签： jquery 百度 class div function button

本文链接：https://blog.csdn.net/zhangqihua0/article/details/7738831

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Test_Map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="../CSS/mark_map.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.7.1.js" type="text/javascript"></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%;
height: 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" οnclick="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="标注" οnclick="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 bdMap = new BMap.Map("mapBaidu", { mapType: BMAP_HYBRID_MAP });
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.setCurrentCity("'" + document.getElementById("curCity").innerHTML + "'");
map.centerAndZoom(point, 15);

map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图

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');
}
//添加地图类型控件
map.addControl(new BMap.MapTypeControl());

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

// 创建CityList对象，并放在citylist_container节点内
var myCl = new BMapLib.CityList({ container: "citylist_container", map: map });
// 给城市点击时，添加相关操作
myCl.addEventListener("cityclick", function (e) {
// 修改当前城市显示
document.getElementById("curCity").innerHTML = e.name;
var address = e.name;
map.setCurrentCity("'" + address+ "'");
local.search("'" + address + "'");

// 点击后隐藏城市列表
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).ready(function () {
local.search(document.getElementById("curCity").innerHTML);
});
// 给城市列表上的关闭按钮添加点击操作
document.getElementById("popup_close").onclick = function () {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};

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

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