刚刚开始工作,领导就让我做一个百度地图,我不会所以问百度。
我认为有点难的怎么把获取坐标,百度的API,因为创建地图实例" var point = new BMap.Point(120.619907,31.317987)",是以坐标来确定显示的位置,
而百度不提供坐标服务,搜了一下,Google有提供服务的(http://blog.csdn.net/kalision/article/details/7236344),Google横纵坐标和百度相反,感觉如果用Google地图查坐标再转百度地图太麻烦,但是客户要求百度地图,无奈只得继续百度,请大家多多点评
然后整理下面的一些代码:
<!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> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>百度地图</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <style type="text/css"> body{height:600px;;margin:0px;padding:0px; width:800px;} #container{height:100%} </style> </head> <body onkeydown="btSearche()"> <div> <input type="text" name="city" runat="server" id="city" value="" size="8" /> <input type="text" name="adress" id="adress" runat="server" value="" /> <!--这里可以看到坐标!--> <input type="text" name="point" value="" runat="server" id="coordinates" /><input type="text" name="point" value="" runat="server" id="coordinates1" /> <input type="button" value="搜索" onclick="searche_address()"/> </div> <div id="container"></div> <script type="text/javascript"> function btSearche() { if (event.keyCode == 13) { searche_address(); } } function searche_address() { point(document.getElementById('city').value, document.getElementById('adress').value, 'coordinates') }; function point(ygh_city, ygh_adress) { if (ygh_adress == "" || ygh_city == "") { alert("请输入具体地址!"); return; }
//确定坐标"myGeo.getPoint()"
var myGeo = new BMap.Geocoder(); myGeo.getPoint(ygh_adress, function (point) { if (point) { document.getElementById('coordinates').value = point.lng; document.getElementById('coordinates1').value = point.lat; var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(point.lng, point.lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //平移控件 map.addControl(new BMap.ScaleControl()); //比例尺控件 map.addControl(new BMap.OverviewMapControl()); //缩略图控件 map.addControl(new BMap.MapTypeControl()); //电子地图的地图类型控件 //map.setCurrentCity("石路步行街"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用 var marker = new BMap.Marker(point); map.addOverlay(marker); //位置说明提示框 var opts = { title: '<span style="font-size:14px;color:#0A8021">我的地盘</span>' }; var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>你懂的</br><b>电话:</b>0512-859921010</br>详情>></a></div>", opts); // 创建信息窗口对象,引号里可以书写任意的html语句。 map.openInfoWindow(infoWindow, map.getCenter()); } else { alert("没有找到坐标,您可以放大您选择的地址!"); } }, ygh_city); } point("江苏", "苏州市"); </script> </body> </html>