首页 > 代码库 > 百度地图调用和搜索

百度地图调用和搜索

2024-07-13 14:39:18   227人阅读

 这个是搜索地理位置,有个以输入框,单击搜索,可以直接搜到你想去的位置.相当于地图搜索.

 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4     <title></title> 5  6     <script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.4"> 7     </script> 8  9 </head>10 <body>11     <p>12         地址：<input id="txtSearch" type="text" />13         <input type="button" value="搜索" onclick="search()" /></p>14     <div style="width: 100%; height: 800px; border: 1px solid gray;" id="container">15     </div>16 </body>17 18 <script type="text/javascript">19     function $(id) {20         return document.getElementById(id); //定义$21     }22     var map = new BMap.Map("container"); //创建地图23     map.centerAndZoom(new BMap.Point(120.384715, 36.090548), 13); //初始化地图24 25     var city = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: true} }); //地图显示到查询结果处26 27     function search() {28         var s = $("txtSearch").value;29         city.search(s); //查找城市30     }31 </script>32 33 </html>

获取地图坐标:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>地图坐标概念</title> 6 <script src="http://api.map.baidu.com/api?v=1.2"></script> 7 </head> 8 <body> 9 <div id="map_container" style="width:500px;height:320px;"></div>10 <script>11 var map = new BMap.Map(‘map_container‘, {defaultCursor: ‘default‘});12 map.centerAndZoom(new BMap.Point(120.384715, 36.090548), 10);13 14 var TILE_SIZE = 256;15 16 map.addEventListener(‘click‘, function(e){17 var info = new BMap.InfoWindow(‘‘, {width: 260});18 var projection = this.getMapType().getProjection();19 20 var lngLat = e.point;21 var lngLatStr = "经纬度：" + lngLat.lng + ", " + lngLat.lat;22 23 var worldCoordinate = projection.lngLatToPoint(lngLat);24 var worldCoordStr = "<br />平面坐标：" + worldCoordinate.x + ", " + worldCoordinate.y;25 26 var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)),27 Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18)));28 var pixelCoordStr = "<br />像素坐标：" + pixelCoordinate.x + ", " + pixelCoordinate.y;29 30 var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256),31 Math.floor(pixelCoordinate.y / 256));32 var tileCoordStr = "<br />图块坐标：" + tileCoordinate.x + ", " + tileCoordinate.y;33 34 var viewportCoordinate = map.pointToPixel(lngLat);35 var viewportCoordStr = "<br />可视区域坐标：" + viewportCoordinate.x + ", " + viewportCoordinate.y;36 37 var overlayCoordinate = map.pointToOverlayPixel(lngLat);38 var overlayCoordStr = "<br />覆盖物坐标：" + overlayCoordinate.x + ", " + overlayCoordinate.y;39 40 info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr +41 viewportCoordStr + overlayCoordStr);42 map.openInfoWindow(info, lngLat);43 });44 </script>45 </body>46 </html>


联系
我们