百度地图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         //样式1

116         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         //样式2

130         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         //样式3

143         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

你可能感兴趣的:(百度地图)