浏览器版本低！无法浏览完整内容，建议升级或更换浏览器。
与JavaScript API结合使用的示例

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

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>JSAPI与URLAPI结合示例</title>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3"></script>  
<script src="<--引入第三方jquery-1.4.2.min.js库-->" type="text/javascript"></script>  
<style type="text/css">  
      html,body{  
          width:400px;  
          height:300px;
          margin:0;
          overflow:hidden;  
        }
</style>  
</head>  
<body></body>  
</html>  
<script type="text/javascript">  
        var map = new BMap.Map("container");  
        map.centerAndZoom(new BMap.Point(116.403884,39.914887), 13);  
        map.enableScrollWheelZoom();  
        var marker=new BMap.Marker(new BMap.Point(116.403884,39.914887));  
        map.addOverlay(marker);  
        var licontent="<b>天安门</b><br>";  
                licontent+="<span><strong>地址：</strong>北京市东城区天安门广场北侧</span><br>";  
                licontent+="<span><strong>电话：</strong>(010)63095718,(010)63095630</span><br>";  
                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="https://api.map.baidu.com/direction?destination=latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"®ion=北京"+"&output=html" target="_blank"></a></span>";
            
         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" />";
            
         var content1 ="<form id="gotobaiduform" action="https://api.map.baidu.com/direction" target="_blank" method="get">" + licontent +hiddeninput+"</form>";
             
        var opts1 = { width: 300 };  
                  
        var  infoWindow = new BMap.InfoWindow(content1, opts1);  
              marker.openInfoWindow(infoWindow);  
              marker.addEventListener('click',function(){
                  marker.openInfoWindow(infoWindow);
              });  
                
        function gotobaidu(type)  
              {  
                  if($.trim($("input[name=origin]").val())=="")  
                  {  
                      alert("请输入起点！");  
                      return;  
                  }else{  
                      if(type==1)  
                      {  
                          $("input[name=mode]").val("transit");  
                          $("#gotobaiduform")[0].submit();  
                      }else if(type==2)  
                      {      
                          $("input[name=mode]").val("driving");          
                          $("#gotobaiduform")[0].submit();  
                      }  
                  }  
              }     
</script>
与静态图片结合使用的示例

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

实现代码如下：

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

上一篇

简介

下一篇

web端

本篇文章对您是否有帮助？