百度地图应用

来源：互联网发布：淘宝旺旺注册编辑：程序博客网时间：2024/05/16 18:41

百度地图应用：

包含地图API，加上自己的密钥：

密钥申请：

百度开发者中心

http://developer.baidu.com/

开发支持
http://developer.baidu.com/platform/catalog/navigation-c/node/n301

申请密钥、应用列表
http://lbsyun.baidu.com/apiconsole/key

类参考
http://developer.baidu.com/map/reference/

示例
http://developer.baidu.com/map/jsdemo.htm

百度地图拾取坐标系统即可
http://api.map.baidu.com/lbsapi/getpoint/index.html

实例：

<!doctype html><html><head><meta charset="utf-8"><title>百度地图应用</title><style type="text/css">#map{ width:100%; height:628px; overflow:hidden;}#sh , #hf{ width:80px; height:30px; line-height:30px; color:#fff; text-align:center; background-color:green; position:absolute; left:50px; cursor:pointer;}#sh{ top:50px;}#hf{ top:100px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uBRP2scx44D4rREj4ToGMPafZc97bVsQ"></script></head><body><!--地图--><div id="map"></div><div id="sh">上海</div><div id="hf">合肥</div><script type="text/javascript">function $(id){return document.getElementById(id);}// 百度地图API功能var map = new BMap.Map("map");  // 创建Map实例//上海var point_sh = new BMap.Point(121.480511,31.235957);var marker_sh = new BMap.Marker(point_sh);  // 创建标注map.addOverlay(marker_sh);              // 将标注添加到地图中//合肥var point_hf = new BMap.Point(117.233592,31.826709);var marker_hf = new BMap.Marker(point_hf);  // 创建标注map.addOverlay(marker_hf);              // 将标注添加到地图中map.centerAndZoom(point_sh, 15);   // 初始化地图,用城市名设置地图中心点map.disableScrollWheelZoom(true); //禁用滚轮放大缩小。 $("map").onclick = function(){map.enableScrollWheelZoom(true); //启用滚轮放大缩小。 };//切换至上海$("sh").onclick = function(){map.panTo(point_sh);};//切换至合肥$("hf").onclick = function(){map.panTo(point_hf);};var infoWindow_hf = new BMap.InfoWindow("地址：合肥市政府", {width:200,height:100,title:"合肥市政府"});  // 创建信息窗口对象 marker_hf.addEventListener("click", function(){  map.openInfoWindow(infoWindow_hf,point_hf); //开启信息窗口});var infoWindow_sh = new BMap.InfoWindow("地址：上海市政府", {width:200,height:100,title:"上海市政府"});  // 创建信息窗口对象 marker_sh.addEventListener("click", function(){  map.openInfoWindow(infoWindow_sh,point_sh); //开启信息窗口});</script></body></html>

0 0