上个月帮校团委做了一个服务地图功能的开发。现在写一下心得吧，记录一下我的成长~~~~~
这个服务地图的前端跟后台都是我自己一个人完成的，这是第一次前端后台都自己做的。在不懂前端，只懂后台的情况下做这个功能，其实有点不容易！所以做的时候在前端方面的内容花的时间比较多，光是JS的参数问题就百度了N多次（那个时候没学JS），现在才知道那是多么简单的傻B问题。
这个地图调用的是百度地图的API，申请密钥等操作的时候百度自动帮你生成代码（代码注释得也挺详细），那对开发有很大的方便，开发速度也大大提高。调用百度地图的API只是这个功能的基础，然后就是在这个地图上做文章了。在这个开发的过程中其实还遇到了不少的问题，也学得了不少。例如：URL的解释、文件路径、根据地址获取经纬度等等，虽然那些都是很细节的问题，不过一天不解决就一天不能完成。最大的体会就是在设计测试的时候要防止各种非法输入，如果连白痴都能够正常使用的话，应该也就差不多了吧。事实上在试运行的时候也发现了很多的bug，通过这些bug，其实学到的还挺多的。我也似乎明白了bug是永无止境的~~~~
每做完一个项目，心里都挺开心的，至少多了一点点的成就感，我可以作贡献的！而且我本身也很享受这个开发的过程，尽管其中会有烦恼、急躁的情绪。我一直都相信：没有学不会的知识，而且努力是会有回报的！我喜欢，所以我选择了这条路来实现我的人生意义。
地图网址：http://xtw.gdut.edu.cn/web_zyfw/map/Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AllPoints.aspx.cs" Inherits="AllPoints" %>
<!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=utf-8" />
<title>广东工业大学志愿服务点</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:654px;
1261px;
border:1px solid blue;
}
.style2
{
570px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<form id="form1" runat="server" target="right">
<div id="milkMap"></div>
</form>
</body>
<script type="text/javascript">
function initMap() {
setMapEvent(); //设置地图事件
}
//地图事件设置函数：
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(113.439, 23.0916); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.OverviewMapControl({ isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT })); //为地图添加鹰眼
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨
// var zsIcon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", //图片地址
//new BMap.Size(20, 20), // 标注显示大小
//{
//offset: new BMap.Size(0, 0), // 标注底部小尖尖的偏移量
//imageOffset: new BMap.Size(-46, 0) // 这里相当于CSS sprites
//});
var zsIcon = new Array();
var pointMarker = new Array();
var marker = new Array();
var infoWindow = new Array();
<% int i=0;while(i<SitesCount()) { %>
zsIcon[<%=i%>] = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", //图片地址
new BMap.Size(20, 20), // 标注显示大小
{
offset: new BMap.Size(0, 0), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(<%=Icon(i)[0]%>,<%=Icon(i)[1]%>) // 这里相当于CSS sprites
});
pointMarker[<%=i%>] = new BMap.Point(<%=DTMapSite().Rows[i]["Coordinate"]%>);
marker[<%=i%>] = new BMap.Marker(pointMarker[<%=i%>], { icon: zsIcon[<%=i%>] });
map.addOverlay(marker[<%=i%>]);
infoWindow[<%=i%>] = new BMap.InfoWindow("<p><% for(int j=0;j<PointImagesCount(Convert.ToInt32(DTMapSite().Rows[i]["Id"]));j++) {%> <a target='_blank' title='相片' alt='相片' > <img src=<%=PointImages(Convert.ToInt32(DTMapSite().Rows[i]["Id"])).Rows[j]["ImageAddress"] %> /></a> <% } %></p><p style='font-size:12px;'>服务点：<%=DTMapSite().Rows[i]["ServicePoint"]%></p><p style='font-size:12px;'>服务点简介：<%=DTMapSite().Rows[i]["Intro"] %></p><p style='font-size:12px;'>地址：<%=DTMapSite().Rows[i]["Location"] %></p>-------------------------------------------------</p><p style='font-size:12px;'>志愿组织：<%=DTMapSite().Rows[i]["Department"] %></p><p style='font-size:12px;'>服务内容：<%=DTMapSite().Rows[i]["Works"] %></p><p style='font-size:12px;'>志愿服务负责人：<%=DTMapSite().Rows[i]["Principal"] %></p><p style='font-size:12px;'>联系方式：<%=DTMapSite().Rows[i]["Contact"] %></p>"); // 创建信息窗口对象
marker[<%=i%>].addEventListener("onmouseover", function () { //给招商银行标注添加点击事件
this.openInfoWindow(infoWindow[<%=i%>]); //打开招商银行的窗口
});
marker[<%=i%>].addEventListener("click", function () {window.open("Details.aspx?ServicePoint=<%=DTMapSite().Rows[i]["ServicePoint"] %>&&Department=<%=DTMapSite().Rows[i]["Department"] %>");});
<% i++; %>
<% } %>
initMap();
</script>
</html>