百度地图

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>百度地图</title>  
  6. <style type="text/css">  
  7. html{height:100%}  
  8. body{height:100%;margin:0px;padding:0px}  
  9. #container{height:100%}  
  10. </style>  
  11. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  12. </head>  
  13.   
  14. <body>  
  15. <div id="container"></div>  
  16. <script type="text/javascript">  
  17. localSearch();  
  18. //deploySearch();  
  19. //rimSearch();  
  20. //boundsSearch();  
  21. //busLine();  
  22. //drivingLine();  
  23.   
  24. //根据关键这搜索区域  
  25. function localSearch(){  
  26. var map = new BMap.Map("container"); // 创建地图实例  
  27. map.addControl(new BMap.NavigationControl());//地图控制插件，该插件可以控制地图的位置地图的显示比例  
  28. map.addControl(new BMap.ScaleControl());//显示在地图下方，告诉你地图上1cm对应的真实距离  
  29. //map.addControl(new BMap.OverviewMapControl());  
  30. map.addControl(new BMap.MapTypeControl());//地图的显示类型：包括地图和卫星  
  31. //确定搜索对象  
  32. var local=new BMap.LocalSearch(map,{  
  33. renderOptions:{map:map}  
  34. });  
  35. //根据关键字定义到相应的区域  
  36. local.search("南京");  
  37. }  
  38.   
  39. //搜索北京市里的中关村,只显示8个结果  
  40. function deploySearch(){  
  41. var map=new BMap.Map("container");  
  42. map.addControl(new BMap.NavigationControl());  
  43. var local=new BMap.LocalSearch("北京市",{  
  44. renderOptions:{  
  45. map:map,  
  46. autoViewport:true,  
  47. selectFirstResult:true  
  48. },  
  49. pageCapacity:8  
  50. });  
  51. local.search("中关村");  
  52. }  
  53.   
  54. //在南京玄武湖附近搜索小吃  
  55. function rimSearch(){  
  56. var map = new BMap.Map("container");   
  57. var point = new BMap.Point(118.783557,32.053502); // 创建点坐标  
  58. map.centerAndZoom(point,15); // 初始化地图，设置初始点为南京  
  59. map.addControl(new BMap.NavigationControl());   
  60. var local = new BMap.LocalSearch(map, {   
  61. renderOptions:{map: map, autoViewport: true}   
  62. });   
  63. local.searchNearby("小吃", "玄武湖");   
  64. }  
  65.   
  66. //当前地图视野范围内搜索银行  
  67. function boundsSearch(){  
  68. var map = new BMap.Map("container");   
  69. //地点为北京  
  70. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);   
  71. map.addControl(new BMap.NavigationControl());  
  72. var local = new BMap.LocalSearch(map, {   
  73. renderOptions:{map: map}   
  74. });   
  75. //搜索地图视野内的银行  
  76. local.searchInBounds("银行", map.getBounds());   
  77. }  
  78.   
  79. //公交导航的区域范围只能是市，下面是南京市天隆寺到玄武湖的公交路线  
  80. function busLine(){  
  81. var map = new BMap.Map("container");   
  82. //地点为南京  
  83. map.centerAndZoom(new BMap.Point(118.783557,32.053502), 14);   
  84. map.addControl(new BMap.NavigationControl());  
  85. var transit = new BMap.TransitRoute(map, {   
  86. renderOptions: {map: map}   
  87. });   
  88. transit.search("天隆寺", "玄武湖");   
  89. }  
  90.   
  91. //南京从天隆寺到玄武湖驾车路线  
  92. function drivingLine(){  
  93. var map = new BMap.Map("container");   
  94. //地点为南京  
  95. map.centerAndZoom(new BMap.Point(118.783557,32.053502), 14);   
  96. map.addControl(new BMap.NavigationControl());  
  97. var driving = new BMap.DrivingRoute(map, {   
  98. renderOptions: {   
  99. map: map,   
  100. autoViewport: true   
  101. }   
  102. });   
  103. driving.search("天隆寺", "玄武湖");  
  104. }  
  105. </script>  
  106. </body>  
  107. </html>  
posted @ 2013-04-28 10:42  猴子hhj  阅读(533)  评论(0)  编辑  收藏  举报