使用百度MAPAPI做的一些简单操作：创建地图，启用滚轮放大缩小，启用键盘操作，添加鱼骨，创建信息窗口对象，创建标注，获取标注坐标，如果已保存坐标，初始化创建标注，后台保存坐标（方法略）。下面是简单代码
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnCreateBz" type="button" value="创建标注" οnclick="CreateBz()" />
<div style="width: 520px; height: 340px; border: 1px solid gray" id="container">
</div>
<asp:HiddenField ID="hidX" runat="server" />
<asp:HiddenField ID="hidY" runat="server" />
</form>
</body>
</html>
<script type="text/javascript">
//创建地图
var map = new BMap.Map("container"); // 创建Map实例
var x = 117.02835;
var y = 36.66413;
if ($("#hidX").val() != "") {
x = $("#hidX").val();
}
if ($("#hidY").val() != "") {
y = $("#hidY").val();
}
var point = new BMap.Point(x, y); // 创建点坐标，济南市mapbar坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
//缩放地图
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
//添加鱼骨
map.addControl(new BMap.NavigationControl());
//如果存在坐标，创建标注
var i = 0;
if ($("#hidX").val() != "" && $("hidY").val() != "") {
CreateBz();
}
//创建标注
function CreateBz() {
if (i > 0) {
return;
}
i++;
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging(true); // 设置标注可拖拽
// marker.addEventListener("click", function() {
// this.openInfoWindow(infoWindow); //弹出信息框
// });
marker.addEventListener("mouseup", function(e) {
this.openInfoWindow(infoWindow); //弹出信息框
alert(e.point.lng + ", " + e.point.lat); //获取坐标
});
}
</script>
后台代码：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
hidX.Value = "117.026841";
hidY.Value = "36.677503";
}
}
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
