百度地图Api进阶教程-弹出信息窗口5.html

转载: http://blog.csdn.net/sd0902/article/details/8471326


[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>百度地图</title>  
  6.   
  7.   
  8. <script type="text/javascript">  
  9.     var iscreatr=false;  
  10.     function initialize() {  
  11.         //---------------------------------------------基础示例---------------------------------------------  
  12.         var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例  
  13.         //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时,即可设置中心点和地图缩放级别。  
  14.         map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。  
  15.         map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动  
  16.           
  17.   
  18.         //---------------------------------------------信息窗口(地图上由此只有1个)---------------------------------------------  
  19.         var sContent =  
  20. "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +   
  21. "<img style='float:right;margin:4px' id='imgDemo' src='http://avatar.csdn.net/4/7/8/1_sd0902.jpg' width='139' height='104' title='天安门'/>" +   
  22. "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +   
  23. "</div>";  
  24.         var point = new BMap.Point(104.017287, 30.685906);//默认  
  25.         var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象  
  26.   
  27.         map.openInfoWindow(infoWindow,point);  
  28.   
  29.   
  30.   
  31.         //---------------------------------------------创建标注---------------------------------------------  
  32.         var point = new BMap.Point(104.117287, 30.685906);//默认  
  33.         // 创建标注对象并添加到地图    
  34.         var marker = new BMap.Marker(point);    
  35.         map.addOverlay(marker);    
  36.           
  37.   
  38.         //---------------------------------------------点击标注弹出信息窗口---------------------------------------------  
  39.         var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈,你看见我啦!我可不常出现哦!</p><p style='font-size:14px;'>看看我是如何添加上来的!</p>");  
  40.       
  41.         marker.addEventListener("click", function(e){   
  42.             this.openInfoWindow(infoWindow);  
  43.         });  
  44.       
  45.     }  
  46.    
  47.     function loadScript() {  
  48.        var script = document.createElement("script");  
  49.        script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  
  50.        document.body.appendChild(script);  
  51.     }  
  52.    
  53.     window.onload = loadScript;  
  54. </script>  
  55.   
  56.   
  57. </head>  
  58.  <body>  
  59.     <div id="r-result" style="float:left;width:100px;">打印坐标</div>  
  60.     <div id="allmap" style="width: 800px; height: 500px"></div>  
  61. </body>  
  62. </html>  
  63.   
  64. <script type="text/javascript">  
  65.     // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));    
  66.      // map.setZoom(14);   //放到到14级  
  67. </script>  

你可能感兴趣的:(百度地图Api进阶教程-弹出信息窗口5.html)