Chinaunix首页 | 论坛 | 博客
  • 博客访问: 430802
  • 博文数量: 96
  • 博客积分: 1110
  • 博客等级: 准尉
  • 技术积分: 662
  • 用 户 组: 普通用户
  • 注册时间: 2011-03-14 18:47
个人简介

拔地气不挠,参天节何劲。 平生观物心,独对秋篁影。

文章分类

全部博文(96)

文章存档

2017年(2)

2016年(7)

2015年(9)

2014年(3)

2013年(10)

2012年(42)

2011年(23)

分类: 系统运维

2012-09-10 17:24:00

1,在控制地图的页面添加如下代码:

点击(此处)折叠或打开

  1.     <script type="text/javascript" src=""></script>
  2.     <script type="text/javascript" src=""></script>
  3.     <script language="JavaScript" type="text/javascript">
  4.     /*得到地址的经纬度*/
  5.     function point(ygh_city,ygh_adress){
  6.             document.getElementById('dituContent').style.display='block'; //显示地图
  7.             document.getElementById('othersContent').style.display='none'; //隐藏其他内容
  8.             var myGeo = new BMap.Geocoder();
  9.             myGeo.getPoint(ygh_adress, function(point){
  10.                     if (point) {
  11.                             initMap(point.lng,point.lat);//创建和初始化地图
  12.                     } else {
  13.                             alert("地址出错");
  14.                     }
  15.             }, ygh_city);
  16.     }
  17.     </script>

  18.     /*根据地址的经纬度创建地图*/
  19.     <script type="text/javascript">
  20.         //创建和初始化地图函数:
  21.         function initMap(a,b){
  22.             createMap(a,b);//创建地图
  23.             setMapEvent();//设置地图事件
  24.             addMapControl();//向地图添加控件
  25.         }
  26.         
  27.         //创建地图函数:
  28.         function createMap(a,b){
  29.             var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  30.             var point = new BMap.Point(a,b);//定义一个中心点坐标
  31.             map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
  32.             window.map = map;//将map变量存储在全局
  33.               var marker = new BMap.Marker(point);
  34.                                //创建信息窗口
  35.             var opts = {
  36.                  width : 250, // 信息窗口宽度
  37.                  height: 100, // 信息窗口高度
  38.                  title : "地址" // 信息窗口标题
  39.            }
  40.             var infoWindow = new BMap.InfoWindow("这里是地址,可拖动至其他位置,放大查看其详细地址", opts); // 创建信息窗口对象
  41.             map.addOverlay(marker);
  42.             marker.enableDragging();
  43.             marker.addEventListener("click",function(){
  44.                map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
  45.                     });
  46.         }

  47.         
  48.         //地图事件设置函数:
  49.         function setMapEvent(){
  50.             map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
  51.             map.enableScrollWheelZoom();//启用地图滚轮放大缩小
  52.             map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
  53.             map.enableKeyboard();//启用键盘上下左右键移动地图
  54.         }
  55.         
  56.         //地图控件添加函数:
  57.         function addMapControl(){
  58.             //向地图中添加缩放控件
  59.         var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  60.         map.addControl(ctrl_nav);
  61.             //向地图中添加缩略图控件
  62.         var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
  63.         map.addControl(ctrl_ove);
  64.             //向地图中添加比例尺控件
  65.         var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
  66.         map.addControl(ctrl_sca);
  67.         }
  68.           
  69.     </script>
  70. <p><a href="javascript:point('河南省平顶山市','宝丰县样庄镇','coordinates');">查看电子地图</a></p>
2.在需要显示地图的页面添加如下代码:

点击(此处)折叠或打开

  1. <div style="width:800px;height:600px;border:#ccc solid 1px;display:none;" id="dituContent"></div>
  2.     <div id="goodsContent">
  3.       这里放其他内容






阅读(1035) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~