·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 百度地图api（摘自百度）

【如有意向点此提交需求】关于我们

百度地图api（摘自百度）

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

百度地图api（摘自百度）

  1 <!DOCTYPE html>  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5     <style type="text/CSS">  6         body, html {  7             width: 100%;  8             height: 100%;  9             overflow: hidden; 10             margin: 0; 11         } 12  13         #allmap { 14             height: 100%; 15             overflow: hidden; 16         } 17     </style> 18     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yqYfrk8ClmehOV743RST9c8Z"></script> 19     <script type="text/Javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 20     <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> 21  22     <title>SearchInfoWindow</title> 23 </head> 24 <body> 25     <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 26         <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> 27     </div> 28     <script type="text/javascript"> 29  30         // 百度地图API功能 31         var map = new BMap.Map('map'); 32         var poi = new BMap.Point(116.307852, 40.057031); 33         map.centerAndZoom(poi, 16); 34         map.enableScrollWheelZoom(); 35  36         var content = '<div style="margin:0;line-height:20px;padding:2px;">' + 37                         '<img src="/image/logo.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + 38                         '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' + 39                       '</div>'; 40  41         //创建检索信息窗口对象 42         var searchInfoWindow = null; 43         searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { 44             title: "百度大厦",      //标题 45             width: 290,             //宽度 46             height: 105,              //高度 47             panel: "panel",         //检索结果面板 48             enableAutoPan: true,     //自动平移 49             searchTypes: [ 50                 BMAPLIB_TAB_SEARCH,   //周边检索 51                 BMAPLIB_TAB_TO_HERE,  //到这里去 52                 BMAPLIB_TAB_FROM_HERE //从这里出发 53             ] 54         }); 55         var marker = new BMap.Marker(poi); //创建marker对象 56         marker.enableDragging(); //marker可拖拽 57         marker.addEventListener("click", function (e) { 58             searchInfoWindow.open(marker); 59         }) 60         map.addOverlay(marker); //在地图中添加marker 61         searchInfoWindow.open(marker); //在marker上打开检索信息串口 62         $("close").onclick = function () { 63             searchInfoWindow.close(); 64         } 65         $("open").onclick = function () { 66             var enableSendToPhone = false; 67             if ($("enableSendToPhone").checked) { 68                 enableSendToPhone = true; 69             } 70             searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { 71                 title: "百度大厦",      //标题 72                 width: 290,             //宽度 73                 height: 105,              //高度 74                 panel: "panel",         //检索结果面板 75                 enableAutoPan: true,     //自动平移 76                 enableSendToPhone: enableSendToPhone, //是否启用发送到手机 77                 searchTypes: [ 78                     BMAPLIB_TAB_SEARCH,   //周边检索 79                     BMAPLIB_TAB_TO_HERE,  //到这里去 80                     BMAPLIB_TAB_FROM_HERE //从这里出发 81                 ] 82             }); 83             if ($("enableAutoPan").checked) { 84                 searchInfoWindow.enableAutoPan(); 85             } else { 86                 searchInfoWindow.disableAutoPan(); 87             }; 88             searchInfoWindow.open(marker); 89         } 90         $("show").onclick = function () { 91             searchInfoWindow.show(); 92         } 93         $("hide").onclick = function () { 94             searchInfoWindow.hide(); 95         } 96         $("getPosition").onclick = function () { 97             var position = searchInfoWindow.getPosition(); 98             alert("经度：" + position.lng + "；纬度：" + position.lat); 99         }100         $("setValue").onclick = function () {101             searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value));102             searchInfoWindow.setTitle($("title").value);103             searchInfoWindow.setContent($("content").value);104         }105         $("getContent").onclick = function () {106             alert(searchInfoWindow.getContent());107         }108         $("getTitle").onclick = function () {109             alert(searchInfoWindow.getTitle());110         }111         function $(id) {112             return document.getElementById(id);113         }114 115         //样式1116         var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {117             title: "信息框1", //标题118             panel: "panel", //检索结果面板119             enableAutoPan: true, //自动平移120             searchTypes: [121                 BMAPLIB_TAB_FROM_HERE, //从这里出发122                 BMAPLIB_TAB_SEARCH   //周边检索123             ]124         });125         function openInfoWindow1() {126             searchInfoWindow1.open(new BMap.Point(116.319852, 40.057031));127         }128 129         //样式2130         var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {131             title: "信息框2", //标题132             panel: "panel", //检索结果面板133             enableAutoPan: true, //自动平移134             searchTypes: [135                 BMAPLIB_TAB_SEARCH   //周边检索136             ]137         });138         function openInfoWindow2() {139             searchInfoWindow2.open(new BMap.Point(116.324852, 40.057031));140         }141 142         //样式3143         var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {144             title: "信息框3", //标题145             width: 290, //宽度146             height: 40, //高度147             panel: "panel", //检索结果面板148             enableAutoPan: true, //自动平移149             searchTypes: [150             ]151         });152         function openInfoWindow3() {153             searchInfoWindow3.open(new BMap.Point(116.328852, 40.057031));154         }155 156 157         var isPanelShow = false;158         //显示结果面板动作159         $("showPanelBtn").onclick = function () {160             if (isPanelShow == false) {161                 isPanelShow = true;162                 $("showPanelBtn").style.right = "300px";163                 $("panelWrap").style.width = "300px";164                 $("map").style.marginRight = "300px";165                 $("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>";166             } else {167                 isPanelShow = false;168                 $("showPanelBtn").style.right = "0px";169                 $("panelWrap").style.width = "0px";170                 $("map").style.marginRight = "0px";171                 $("showPanelBtn").innerHTML = "显示检索结果面板<br/><";172             }173         }174     </script>175 </body>176 </html>

详细实例请参考百度api