码迷,mamicode.com
首页 > 其他好文 > 详细

百度地图调用和搜索

时间:2014-07-23 14:45:27      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   width   

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

 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>

百度地图调用和搜索,布布扣,bubuko.com

百度地图调用和搜索

标签:style   blog   http   java   color   width   

原文地址:http://www.cnblogs.com/liubeimeng/p/3862638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!