您当前的位置: uri > guide > helloworld
helloworld

Hello World

与JavaScript API结合使用的示例

本示例是使用JavaScript API制作一张动态地图,在天安门添加标注,且提供最简单的信息窗口,同时使用URI API,构造一条简单的URL,调起PC端百度地图提供公交,驾车换乘检索服务。具体代码如下:

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>JSAPI与URLAPI结合示例</title>  
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3"></script>  
  6. <script src="http://d1.lashouimg.com/static/js/release/jquery-1.4.2.min.js" type="text/javascript"></script>  
  7. <style type="text/css">  
  8. html,body{  
  9.     width:400px;  
  10.     height:300px;
  11.     margin:0;
  12.     overflow:hidden;  
  13.     }
  14. </style>  
  15. </head>  
  16. <body>  
  17.     <div style="width:400px;height:300px;border:1px solid gray" id="container"</div>  
  18. </body>  
  19. </html>  
  20. <script type="text/javascript">  
  21.     var map = new BMap.Map("container");  
  22.     map.centerAndZoom(new BMap.Point(116.403884,39.914887), 13);  
  23.     map.enableScrollWheelZoom();  
  24.     var marker=new BMap.Marker(new BMap.Point(116.403884,39.914887));  
  25.     map.addOverlay(marker);  
  26.     var licontent="<b>天安门</b><br>";  
  27.         licontent+="<span><strong>地址:</strong>北京市东城区天安门广场北侧</span><br>";  
  28.         licontent+="<span><strong>电话:</strong>(010)63095718,(010)63095630</span><br>";  
  29.         licontent+="<span class=\"input\"><strong></strong><input class=\"outset\" type=\"text\" name=\"origin\" value=\"北京站\"/><input class=\"outset-but\" type=\"button\" value=\"公交\" onclick=\"gotobaidu(1)\" /><input class=\"outset-but\" type=\"button\" value=\"驾车\"  onclick=\"gotobaidu(2)\"/><a class=\"gotob\" href=\"url=\"http://api.map.baidu.com/direction?destination=latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"®ion=北京"+"&output=html\" target=\"_blank\"></a></span>";
  30.  
  31.     var hiddeninput="<input type=\"hidden\" value=\""+'北京'+"\" name=\"region\" /><input type=\"hidden\" value=\"html\" name=\"output\" /><input type=\"hidden\" value=\"driving\" name=\"mode\" /><input type=\"hidden\" value=\"latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"\" name=\"destination\" />";
  32.  
  33.     var content1 ="<form id=\"gotobaiduform\" action=\"http://api.map.baidu.com/direction\" target=\"_blank\" method=\"get\">" + licontent +hiddeninput+"</form>";
  34.    
  35.     var opts1 = { width: 300 };  
  36.        
  37.     var  infoWindow = new BMap.InfoWindow(content1, opts1);  
  38.     marker.openInfoWindow(infoWindow);  
  39.     marker.addEventListener('click',function(){
  40.         marker.openInfoWindow(infoWindow);
  41.     });  
  42.      
  43.     function gotobaidu(type)  
  44.     {  
  45.         if($.trim($("input[name=origin]").val())=="")  
  46.         {  
  47.             alert("请输入起点!");  
  48.             return;  
  49.         }else{  
  50.             if(type==1)  
  51.             {  
  52.                 $("input[name=mode]").val("transit");  
  53.                 $("#gotobaiduform")[0].submit();  
  54.             }else if(type==2)  
  55.             {      
  56.                 $("input[name=mode]").val("driving");          
  57.                 $("#gotobaiduform")[0].submit();  
  58.             }  
  59.         }  
  60.     }    
  61. </script>

与静态图片结合使用的示例

本示例是使用静态图API制作一张上海虹桥机场位置展示的静态地图图片,若用户点击此图片,便可进入PC端百度地图查看更多信息及交通换乘方案等。 实现代码如下:

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>静态图与URLAPI结合示例</title>    
<body>   
    <a href='http://api.map.baidu.com/geocoder?address=上海虹桥机场&output=html' target='_blank'> <img style="margin:2px" width="400" height="300" src="http://api.map.baidu.com/staticimage? 
        width=400&height=300&zoom=11¢er=上海虹桥机场" />  
    </a>
</body>  
</html>