百度地图学习
这个事情很久前想做了，而且也做了一点，但是没有做成我想要的效果，后面一直只是想想，仅仅想想而已。有点可笑了！今天又来研究了，首先在博客园首页找找看中输入“百度地图”，结果出现了如下结果如图：
然后点击其中那个说有源码的，然后认真看了一下，跟着它做，结果勉勉强强可以看到效果了，不过不是很理想，只是关键代码，对于一向不怎么喜欢想的人来说，是很难接受的。本也打算像下面评论的人一样留个电子邮件，然后向作者索取源代码，然后再来研究。后面吃完饭回来，观念改变了，试试看，就这样，硬着头皮摸索，结果有了下面的结果如图：
代码结构如下：
<!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 > <title></title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <script src="../shangchuan/jquery.js" type="text/javascript"></script> <style type="text/css"> ul li { list-style-type:none; height:50px; display:block; } </style> </head> <body> <form id="form1"> <div style=" width:1200px"> <div style="width:250px;height:500px; float: left;"> <ul> <li onmouseover="ReDrawMap('113.2694165','23.1206685','豪华大酒店1')">豪华大酒店1</li> <li onmouseover="ReDrawMap('113.2675147','23.131815','豪华大酒店2')"> 豪华大酒店2</li> <li onmouseover="ReDrawMap('113.2860744','23.1375744','豪华大酒店3')">豪华大酒店3</li> <li onmouseover="ReDrawMap('113.2634046','23.1561963','豪华大酒店4')">豪华大酒店4</li> <li onmouseover="ReDrawMap('113.2687466','23.1273524','豪华大酒店5')">豪华大酒店5</li> <li onmouseover="ReDrawMap('113.2569644','23.1093136','豪华大酒店6')">豪华大酒店6</li> <li onmouseover="ReDrawMap('113.2767329','23.0909343','豪华大酒店7')">豪华大酒店7</li> <li onmouseover="ReDrawMap('113.2453437','23.1078105','豪华大酒店8')">豪华大酒店8</li> <li onmouseover="ReDrawMap('113.2428724','23.1056848','豪华大酒店9')">豪华大酒店9</li> <li onmouseover="ReDrawMap('113.2676179','23.1147277','豪华大酒店10')">豪华大酒店10</li> </ul> </div> <div style="width:900px;height:500px; float: left;border:1px solid gray" id="container"></div> </div> </form> </body> </html> <script type="text/javascript"> function ReDrawMap(jingdu,weidu,hotelname) { var resultData = [{ "HotelCode": "1175", "jingdu": "113.2694165", "weidu": "23.1206685" }, { "HotelCode": "1178", "jingdu": "113.2675147", "weidu": "23.131815" }, { "HotelCode": "1182", "jingdu": "113.2860744", "weidu": "23.1375744" }, { "HotelCode": "1185", "jingdu": "113.2634046", "weidu": "23.1561963" }, { "HotelCode": "1186", "jingdu": "113.2687466", "weidu": 23.1273524 }, { "HotelCode": "1188", "jingdu": "113.2569644", "weidu": "23.1093136" }, { "HotelCode": "1190", "jingdu": "113.2767329", "weidu": "23.0909343" }, { "HotelCode": "1191", "jingdu": "113.2453437", "weidu": "23.1078105" }, { "HotelCode": "1192", "jingdu": "113.2428724", "weidu": "23.1056848" }, { "HotelCode": "1194", "jingdu": "113.2676179", "weidu": "23.1147277"}]; //var alert(resultData.length); var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(113.275, 23.117); map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 map.enableKeyboard = true; map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); // 启用比例尺。 map.addControl(new BMap.MapTypeControl()); // 是否启用卫星地图等等。 var MAX = resultData.length; // alert(MAX); var markers = []; var pt = null, mypt = null; var i = 0; var infoWindow; var myIcon = new BMap.Icon("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/chizhiyiheng.png", new BMap.Size(28, 37), { }); // alert(markers.length); var opts1 = { title: '<span style="font-size:14px;color:#0A8021">'+hotelname+'</span>' }; var tmpInfo = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1); // 创建信息窗口对象，引号里可以书写任意的html语句。 for (; i < MAX; i++) { //alert(resultData[1].jingdu); pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu); mypt = new BMap.Marker(pt); mypt.setIcon(myIcon); map.addOverlay(mypt); // mypt.openInfoWindow(tmpInfo); markers.push(mypt); } var pointa = new BMap.Point(jingdu, weidu); // 创建点坐标 // alert(point); debugger; // var mkrs =map.Map.getOverlays(); // alert(mkrs); var positionjing; var positionwei; for (var i = 0; i < MAX; i++) { positionjing = resultData[i].jingdu; positionwei = resultData[i].weidu; if (positionjing == jingdu && positionwei == weidu) { pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu); mypt = new BMap.Marker(pt); mypt.setIcon(myIcon); map.addOverlay(mypt); mypt.openInfoWindow(tmpInfo); } } } $(document).ready(function () { var strc = "Mapdata.aspx" var cityid = "146"; var resultData = [{ "HotelCode": "1175", "jingdu": "113.2694165", "weidu": "23.1206685" }, { "HotelCode": "1178", "jingdu": "113.2675147", "weidu": "23.131815" }, { "HotelCode": "1182", "jingdu": "113.2860744", "weidu": "23.1375744" }, { "HotelCode": "1185", "jingdu": "113.2634046", "weidu": "23.1561963" }, { "HotelCode": "1186", "jingdu": "113.2687466", "weidu": 23.1273524 }, { "HotelCode": "1188", "jingdu": "113.2569644", "weidu": "23.1093136" }, { "HotelCode": "1190", "jingdu": "113.2767329", "weidu": "23.0909343" }, { "HotelCode": "1191", "jingdu": "113.2453437", "weidu": "23.1078105" }, { "HotelCode": "1192", "jingdu": "113.2428724", "weidu": "23.1056848" }, { "HotelCode": "1194", "jingdu": "113.2676179", "weidu": "23.1147277"}]; //var alert(resultData.length); var map = new BMap.Map("container"); // 创建地图实例 //var map = option.Map || new BMap.Map("container"); var point = new BMap.Point(113.275, 23.117); map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 map.enableKeyboard = true; map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); // 启用比例尺。 map.addControl(new BMap.MapTypeControl()); // 是否启用卫星地图等等。 var MAX = resultData.length; // alert(MAX); var markers = []; var pt = null, mypt = null; var i = 0; var infoWindow; var myIcon = new BMap.Icon("http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/chizhiyiheng.png", new BMap.Size(28, 37), { }); for (; i < MAX; i++) { //alert(resultData[1].jingdu); pt = new BMap.Point(resultData[i].jingdu, resultData[i].weidu); mypt = new BMap.Marker(pt); mypt.setIcon(myIcon); map.addOverlay(mypt); markers.push(mypt); } //alert(markers.length); ////最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 // var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers.reverse(), isAverangeCenter: true, girdSize: 100, maxZoom: 15 }); /*$.ajax({ type: "POST", dataType: "json", url: strc, // data: "sortBy='" + sortByStr + "' &&paixu='" + paixu + "'", //传值 data: { "cityid": cityid }, beforeSend: function (XMLHttpRequest) { // $("#fdiv").html("<img style='margin:40px 0 0 10px;' src='http://www.fnetravel.com/images/022.gif'/> 数据加载中..."); }, success: function (resultData) { alert(resultData); /* var map = new BMap.Map("container"); var pp = new BMap.Point(113.275, 23.117); map.centerAndZoom(pp,15);*/ /* var map = new BMap.Map("container"); // 创建地图实例 //var map = option.Map || new BMap.Map("container"); var point = new BMap.Point(113.275, 23.117); map.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 map.enableKeyboard = true; map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); // 启用比例尺。 map.addControl(new BMap.MapTypeControl()); // 是否启用卫星地图等等。 var MAX = resultData.count; var markers = []; var pt = null, mypt = null; var i = 0; var infoWindow; var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(28, 37), { }); for (; i < MAX; i++) { pt = new BMap.Point(resultData.data[i].Longitude, resultData.data[i].Dimension); mypt = new BMap.Marker(pt); mypt.setIcon(myIcon); mypt.addEventListener("click", function (no) { return function () { infoWindow = LoadMakerInfo(resultData.data[no]); this.openInfoWindow(infoWindow); //createInfoWin(resultData.data[no]).redraw(); }; } (i)); markers.push(mypt); } ////最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers.reverse(), isAverangeCenter: true, girdSize: 100, maxZoom: 15 }); }, error: function (xx) { alert("xxxxxx"); } }); */ }); </script>
本想用Ajax从数据库中动态取，可老是不成功。无奈只有写死那么十条数据了。
代码有点零乱，将就看看吧！
参考：http://www.cnblogs.com/xsyblogs/p/3936275.html
