前段时间研究了一下百度地图的API文档,做了一个百度地图与数据库结合的小功能,很简单,就是把需要的点标记在地图上,进行一定的描述,然后将点坐标与描述的文字写入数据库,之后再将数据库的点显示在地图上。
下面是前台页面,主要实现了功能也没有做什么其他的东西,里面使用了3个隐藏域进行前后台的传值操作。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8._Default" %>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加点标注</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里改成自己的百度key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
<style type="text/css">
/* 样式选择面板相关css */
#divStyle {
width: 280px;
height: 50px;
border: solid 1px gray;
display:block;
margin: 2px; 0px;
display:none;
}
#divStyle ul{
list-style-type: none;
padding: 2px 2px;
margin: 2px 2px
}
#divStyle ul li a{
cursor: pointer;
margin: 2px 2px;
width: 30px;
height: 30px;
display: inline-block;
border: solid 1px #ffffff;
text-align: center;
}
#divStyle ul li a:hover{
background:none;
border: solid 1px gray;
}
#divStyle ul li img{
border: none;
background:url('http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/icon.gif');
}
/* infowindow相关css */
.common {
font-size: 12px;
}
.star {
color: #ff0000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="width:820px;height:520px;border:1px solid gray; margin:0 auto;" id="container"></div>
<input type="button" value="选择标注样式" οnclick="openStylePnl()" />
<input type="button" value="关闭" οnclick="mkrTool.close()" />
<div id="divStyle" >
<ul>
<li>
<a οnclick="selectStyle(0)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: 0 0" /></a>
<a οnclick="selectStyle(1)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -23px 0" /></a>
<a οnclick="selectStyle(2)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -46px 0" /></a>
<a οnclick="selectStyle(3)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -69px 0" /></a>
<a οnclick="selectStyle(4)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -92px 0" /></a>
<a οnclick="selectStyle(5)" href = 'javascript:void(0)'><img src="http://api.map.baidu.com/library/MarkerTool/1.2/examples/images/transparent.gif" style="width:12px;height:21px;background-position: -115px 0" /></a>
</li>
</ul>
</div>
<asp:HiddenField ID="HidId" runat="server" />
<asp:HiddenField ID="HidId1" runat="server" />
<asp:HiddenField ID="HidId2" runat="server" />
</form>
</body>
</html>
以下为主要的javascript,思路是如下:后台生成josn字符串,传值到前台,通过前台的script进行分割,然后显示为marker标注。
输出json字符串
var BASEDATA = [ <%=outhtml()%>]
//创建和初始化地图函数:
function initMap(){
window.map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
var marker=window.addMarker(BASEDATA);
map.addOverlay(marker);//向地图中添加marker
}
//创建marker
window.addMarker = function (data){
map.clearOverlays();
for(var i=0;i<data.length;i++){
var json = data[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
// var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point);
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var _json = json;
var _iw = createInfoWindow(_json);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(json){
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
initMap();//创建和初始化地图
后台懒得贴代码了,也很简单,说一下思路。 读取数据库后进行字符串拼接,然后传值给前台。