devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

iframe嵌套百度地图_iframe嵌入地图ak

作者：知新_RL | 2024-03-04 19:39:15

赞

踩

iframe嵌入地图ak

嵌套效果：
在这里插入图片描述
注意：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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/188463
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号