百度地图调用

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RbjehGq5oD8wlzi3rONZhnaX"></script>


小区名称:
<input type="text" name="COMMUNITYNAME" id="COMMUNITYNAME" value="" maxlength="32" placeholder="这里输入小区名称" title="小区名称"/>
				    <a class="btn btn-mini btn-primary" onclick="Mapsearch();">查找</a>
				

lat:<input type="text" name="LAT" id="LAT" value="" maxlength="32" placeholder="这里输入lat" title="lat"/>
lng:<input type="text" name="LNG" id="LNG" value="" maxlength="32" placeholder="这里输入lng" title="lng"/>

小区地址:
<input type="text" name="ADDRESS" id="ADDRESS" value="${pd.ADDRESS}" maxlength="32" placeholder="这里输入小区地址" title="小区地址"/>

地图容器:
<div id="allmap" style="width:100%;height:200px;"></div>




		<script>
			$(function () {
				// 百度地图API功能
				//alert(+);       
				map = new BMap.Map("allmap");    // 创建Map实例
				map.centerAndZoom(new BMap.Point('${pd.LNG}', '${pd.LAT}'), 11);  // 初始化地图,设置中心点坐标和地图级别
				map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
				//map.setCurrentCity('北京');          // 设置地图显示的城市 此项是必须设置的
				map.enableScrollWheelZoom(true); 开启鼠标滚轮缩放
				var menu = new BMap.ContextMenu();
				var txtMenuItem = [
					{
						text:'获取经纬度',
						callback:function(e){
							//alert(e.lng + ", " + e.lat);
							$("#LNG").val(e.lng);
							$("#LAT").val(e.lat);
						}
					}
				];
				for(var i=0; i < txtMenuItem.length; i++){
					menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
				}
				map.addContextMenu(menu);
				function showInfo(e){
					
				}
			});
				
		
			function Mapsearch(){
				var keyword=$("#COMMUNITYNAME").val();
				
				map.clearOverlays();
				var localSearch = new BMap.LocalSearch(map);
				localSearch.enableAutoViewport(); //允许自动调节窗体大小			
				localSearch.setSearchCompleteCallback(function (searchResult) {
					
					 var poi = searchResult.getPoi(0);
					 $("#LNG").val(poi.point.lng);
					 $("#LAT").val(poi.point.lat);
					
					 //document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度,将结果显示在文本框中
					 map.centerAndZoom(poi.point, 20);
					 var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注,为要查询的地址对应的经纬度
					 map.addOverlay(marker);
					 
					 var content = $("#COMMUNITYNAME").val() + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
					 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
					 marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
					 var point = new BMap.Point(poi.point.lng,poi.point.lat);
					 var gc = new BMap.Geocoder();
					 gc.getLocation(point, function(rs){
						   var addComp = rs.addressComponents;
						   var address=addComp.province  + addComp.city  + addComp.district  + addComp.street  + addComp.streetNumber;
						   $("#ADDRESS").val(address);
					});
					
				});
				localSearch.search(keyword);
			}
		   
		</script>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yuer629

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值