iframe嵌套百度地图

最新推荐文章于 2023-06-27 14:26:12 发布
胖到没有朋友
最新推荐文章于 2023-06-27 14:26:12 发布
阅读量2.8k
点赞数
分类专栏：前端相关文章标签： html js 街景地图
本文链接：https://blog.csdn.net/qq_41622282/article/details/109185764
版权
前端相关专栏收录该内容
3 篇文章 0 订阅
订阅专栏
嵌套效果：
在这里插入图片描述
注意：iframe的src属性填写的不是url，而是项目中的html文件,以下是html文件代码,获取选中的坐标，只需要拿到iframe对象，调用this.getXY()方法 (其他页面调用iframe.contentWindow.getXY())，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D地图展示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<style type="text/css">
input.btn {
	border: 1px solid #656565;
	width: 50px;
	height: 22px;
	text-align: center;
	vertical-align: middle;
	line-height: 20px;
	background-image: ;
	background-position: 0 0;
	background-color: #F8F8F6;
	letter-spacing: 4px;
	background-repeat: no-repeat;
	background-position: 5px;
	padding-top: 4px;
	padding-bottom: 2px; *+
	padding-top: 2px; *+
	padding-bottom: 0;
	margin-bottom:4px;
	cursor: pointer;
}
input.btn:hover {
	background-color: #B7D6F7;
}
input {
	border: 1px solid #656565;
	line-height: 20px;
}
</style>


</head>
<body style="margin:0;padding:0;width:100%;height:100%;overflow:hidden;" onload="">
	 <div style='display:block;width:100%;height: 30px;overflow:hidden;border:0;'>
	  <div style='display:block;height:100%;float:left;border:0;' id="position">
	   	经纬度：X: <input id="point_x" mdcn="中心X坐标" mdtype="text" bt="text" md="gisp_x"  style="width: 15%;"/>
	 		 	Y: <input id="point_y" mdcn="中心Y坐标" mdtype="text" bt="text" md="gisp_y"style="width: 15%;" />
	 		 	地址模糊查询   
         <input id="text_" type="text" value=""style="width: 20%;"/>
         <input class='btn' type="button" value="搜索" onclick="searchByStationName();">
         </div>
     </div>
     <div style="width:100%;height:100%;border:0;overflow:hidden;">
     	<div style="width:100%;height:100%;border:0;" id="container">
     	
     	</div>
     </div>
</body>
<script type="text/javascript" >

//var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
      var map = new BMap.Map("container"); 
      var point = new BMap.Point(113.934575,22.519486);
      var marker = null;
      var array = new Array();  
      show_Map();
      //当有参数（坐标）传递时，则把地图定位到制定的位置
    // var loca=this.location.search.substring(this.location.search.indexOf("=")+1);
     var loca=getQueryString("site");
     if(loca!="" && loca != null){
      	var location_1=loca.split(",")[0];
      	var location_2=loca.split(",")[1];
        MoveMapShow(location_1,location_2);
        var qwe = document.getElementById("position");
        qwe.style.display="none";
     }
		function getQueryString(name)
		{
		
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    	
			var r = window.location.search.substr(1).match(reg);    	
			if (r != null) 
				return unescape(r[2]); 
			
			return null;    	    	
		}
      function show_Map()
      {
          map.setCurrentCity("深圳"); 
          map.setMapType(BMAP_NORMAL_MAP); //设置地图类型为二维地图
          map.centerAndZoom(point,18);
          map.enableScrollWheelZoom();
          map.enableKeyboard();
          map.addControl(new BMap.NavigationControl()); //添加放大镜控件       
          
          var opts = {
				anchor: BMAP_ANCHOR_TOP_RIGHT,
				offset: new BMap.Size(70, 20),
				size: new BMap.Size(100),
				mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]
			};
  		  map.addControl(new BMap.MapTypeControl(opts)); // 添加图层类型控件		  
                      
          opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(5,30), size: new BMap.Size(100)};
          map.addControl(new BMap.ScaleControl(opts));                    // 添加比例尺控件
            
          opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMap.Size(5,30), isOpen: true, size: new BMap.Size(230,180)};
  		  map.addControl(new BMap.OverviewMapControl(opts));              //添加缩略地图控件   
      }

      map.addEventListener("click",function(e){
         document.getElementById("point_x").value = e.point.lng;
         document.getElementById("point_y").value = e.point.lat;
      });
      
      
      //向select控件添加选项
      function selectOptionAdd(Onselect,sName) 
      {
          var oOption = document.createElement("option");
          oOption.appendChild(document.createTextNode(sName));
          Onselect.appendChild(oOption);
      }
      
      function setMark(Onselect) 
      {
          for(var i = 0; i < array.length; i++)
              map.removeOverlay(array[array.length - i - 1]);
      
          var searname1 = select1.options[select1.selectedIndex].text;
          var searname2 = Onselect.options[Onselect.selectedIndex].text;

      	  var result    =	leapclient.request('getMapMarkData',{
      			parentName: searname1,
      			sonName: searname2
      		});
      	 if (result == null) 
				return false;

   		 for(var i = 0; i < result.length; i++)
   		 {
   		 	addMarker(new BMap.Point(result[i][0],result[i][1]), i, searname2);
   		 }
      }
      
      function removeSelItems(Onselect) 
      {
      	 var result = null;
      	 try
      	 {
      	 	for(var i = 0; i < array.length; i++)
              map.removeOverlay(array[array.length - i - 1]);
	          //删除select中所有项
          	select2.options.length = 1;
          	
          	CodeValueShow(Onselect.options[Onselect.selectedIndex].text, select2);
      	 }
      	 finally
      	 {
   	 		result = null;
      	 }
      }
      
      //创建标注
      function addMarker(point ,index, title)
      {
          var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(20,25),
          {
              offset: new BMap.Size(10,25),
               
              imageOffset: new BMap.Size(0,0 - index*25)
          });
          marker = new BMap.Marker(point,{icon: myIcon});
          var label = new BMap.Label(title,{"offset":new BMap.Size(10,-20)});
          marker.setLabel(label);
          map.addOverlay(marker);
          marker.enableDragging();           // 可拖拽
          //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
          array[array.length] = marker;
      }
      
      function MoveMapShow(x,y)              //显示目标地图
      {
          point = new BMap.Point(x,y);
          map.setCurrentCity("深圳");        
          map.centerAndZoom(point,18);
          map.enableScrollWheelZoom(true);
          
          var title = "";
          var Address_Name = new BMap.Geocoder();
          title = Address_Name.getLocation(new BMap.Point(x,y),function(result)
          {
            if(result)
                title = result.address;
                 
            for(var i = 0; i < array.length; i++)
              map.removeOverlay(array[array.length - i - 1]);
              
            addMarker(new BMap.Point(x,y), 10,title);     
          });
      }

    //清空百度版权信息
  	var PP = false;
  	me = this;
  	var t = setInterval(function(){
  		if (PP) return;
  		
  		var docs = document.getElementById("container");
  		if(docs!=null)
  		{
  			for(var i=0;i<docs.all.length;i++)
  			{
  				if(docs.all[i].className==" anchorBL" || docs.all[i].className=="BMap_cpyCtrl anchorBL")
  				{
  					docs.all[i].style.display="none";
  					PP=true;
  					clearInterval(me.t);
  				}				
  			}
  		}
  	},10);	
  	//清空百度版权信息end

      
      var localSearch= new BMap.LocalSearch (map, {     
         renderOptions: {     
           pageCapacity: 8,     
           autoViewport: true,     
          selectFirstResult: false     
         }     
       });     
      
      localSearch.enableAutoViewport();   
      function searchByStationName()   
      {   
          var keyword = document.getElementById("text_").value; 
          if(keyword == null || keyword == "")
          {
            alert("请输入查询地址");
            return false;
          }  
          localSearch.setSearchCompleteCallback(function(searchResult){   
          var poi = searchResult.getPoi(0);
          if(poi == null)
          {
            alert("未查到您搜索的地址");
            document.getElementById("text_").value = "";
            document.getElementById("text_").focus();
            return false;
          }
          
          document.getElementById("point_x").value=poi.point.lng;
          document.getElementById("point_y").value=poi.point.lat;
          
          MoveMapShow(poi.point.lng, poi.point.lat); 
          });   
          localSearch.search(keyword);     
      }
      
      function getXY()
      {
      	return document.getElementById("point_x").value+","+document.getElementById("point_y").value;       
      }
      

      function getGispPoint() {
    	  //	获取页面中的参数，设置坐标值
	   	  var qs = location.search.substr(1), // 获取url中"?"符后的字串  
	   	    args = {}, // 保存参数数据的对象
	   	    items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
	   	    item = null,
	   	    len = items.length;
	   	 
	   	  for(var i = 0; i < len; i++) {
	   	    item = items[i].split("=");
	   	    var name = decodeURIComponent(item[0]),
	   	      value = decodeURIComponent(item[1]);
	   	    if(name) {
	   	      args[name] = value;
	   	    }
	   	  }
	   	  this.setXY(args.gisp_x,args.gisp_y);
	  }
      
      function setXY(x,y)
      {
      	MoveMapShow(x,y);
      	document.getElementById("point_x").value = x;
      	document.getElementById("point_y").value = y;      
      }
      
      
      function killErrors() 
      { 
        return true; 
      } 
      window.onerror = killErrors;//捕获JS异常不让其弹出错误框 

</script>


</html>