最近在项目中用到百度地图,由于以前没有接触过,所以刚开始感觉无从下手;百度地图JavaScriptAPI是用JavaScript编写的程序接口,废话不多说了看例子.(这是我第一次写博客,欢迎大家指教)
HTML页面代码:
[html]view plaincopy
<divid="container"style="position:absolute;margin-top:30px;width:730px;height:590px;top:50px;border:1pxsolidgray;overflow:hidden;"></div>
JavaScript代码:
[javascript]view plaincopy
//创建百度地图容器armap=newBMap.Map("container");//初始化地图,设置中心点坐标和地图级别。varpoint=newBMap.Point(113.48722,23.187232);map.centerAndZoom(point,13);
[javascript]view plaincopy
varlocalSearch=newBMap.LocalSearch(map);localSearch.enableAutoViewport();//允许自动调节窗体大小map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用map.enableContinuousZoom();//启用地图惯性拖拽,默认禁用map.addControl(newBMap.NavigationControl());//添加默认缩放平移控件map.addControl(newBMap.OverviewMapControl());//添加默认缩略地图控件map.addControl(newBMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));//右下角,打开
由于项目需求我要页面获取到小区的名称转化为经纬度并且在该位置加上标注;下面就是从页面获取位置并且转化为经纬度的过程
HTML页面代码:
[html]view plaincopy
<divstyle="width:730px;margin:auto;"><inputclass="a"type="hidden"value="金水区"/><inputclass="a"type="hidden"value="二七区"/><inputclass="a"type="hidden"value="管城区"/><inputclass="a"type="hidden"value="经开区"/><inputclass="a"type="hidden"value="金水区"/><inputclass="a"type="hidden"value="高新区"/><inputclass="a"type="hidden"value="惠济区"/><inputclass="a"type="hidden"value="郑东新区"/><divid="container"style="position:absolute;margin-top:30px;width:730px;height:590px;top:50px;border:1pxsolidgray;overflow:hidden;"></div>
JavaScript代码:
[javascript]view plaincopy
varpointArray=[];//创建数组接收转化后的多个坐标值varkeyword=[];//从页面获取到的需要转化的地址varkeywordVal;$(".a").each(function(i){//从页面获取多个地址并且存放在shuzuzhongkeywordVal=$(".a").eq(i).val();keyword.push(keywordVal);searchByStationName();});varmarkerArray=[];functionsearchByStationName(keywordVal){map.clearOverlays();//清空原来的标注localSearch.search(keywordVal);localSearch.setSearchCompleteCallback(function(searchResult){varpoi=searchResult.getPoi(0);map.centerAndZoom("郑州",13);varlongitude=poi.point.lng;//经度varlatitude=poi.point.lat;//纬度varpointVal=newBMap.Point(longitude,latitude);pointArray.push(pointVal);varmarker=newBMap.Marker(pointVal);markerArray.push(marker);//创建标注,为要查询的地方对应的经纬度map.addOverlay(marker);//在页面上展示出当前位置信息varinfoWindow=newBMap.InfoWindow("<pstyle='font-size:14px;'>"+searchResult.keyword+"</p>");marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画});}
下面贴上全部代码:
[html]view plaincopy
<!doctypehtml><htmllang="en"><head><title>根据地址查询经纬度</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><scripttype="text/javascript"src="http://api./api?v=1.3"></script><scripttype="text/javascript"src="../js/jquery-1.12.1.min.js"></script><style>a.{margin-right:100px;}</style></head><bodystyle="background:#CBE1FF"><divstyle="width:730px;margin:auto;"><inputclass="a"type="hidden"value="金水区"/><inputclass="a"type="hidden"value="二七区"/><inputclass="a"type="hidden"value="管城区"/><inputclass="a"type="hidden"value="经开区"/><inputclass="a"type="hidden"value="金水区"/><inputclass="a"type="hidden"value="高新区"/><inputclass="a"type="hidden"value="惠济区"/><inputclass="a"type="hidden"value="郑东新区"/><divid="container"style="position:absolute;margin-top:30px;width:730px;height:590px;top:50px;border:1pxsolidgray;overflow:hidden;"></div></div></body><scripttype="text/javascript">varmap=newBMap.Map("container");varpoint=newBMap.Point(113.48722,23.187232);map.centerAndZoom(point,13);varlocalSearch=newBMap.LocalSearch(map);localSearch.enableAutoViewport();//允许自动调节窗体大小map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用map.enableContinuousZoom();//启用地图惯性拖拽,默认禁用map.addControl(newBMap.NavigationControl());//添加默认缩放平移控件map.addControl(newBMap.OverviewMapControl());//添加默认缩略地图控件map.addControl(newBMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));//右下角,打开 varpointArray=[];//创建数组接收转化后的多个坐标值varkeyword=[];//从页面获取到的需要转化的地址varkeywordVal;$(".a").each(function(i){//从页面获取多个地址并且存放在shuzuzhongkeywordVal=$(".a").eq(i).val();keyword.push(keywordVal);searchByStationName();});*console.info(keyword);*/varmarkerArray=[];functionsearchByStationName(keywordVal){map.clearOverlays();//清空原来的标注localSearch.search(keywordVal);localSearch.setSearchCompleteCallback(function(searchResult){varpoi=searchResult.getPoi(0);map.centerAndZoom("郑州",13);varlongitude=poi.point.lng;//经度varlatitude=poi.point.lat;//纬度varpointVal=newBMap.Point(longitude,latitude);pointArray.push(pointVal);varmarker=newBMap.Marker(pointVal);markerArray.push(marker);//创建标注,为要查询的地方对应的经纬度map.addOverlay(marker);//在页面上展示出当前位置信息varinfoWindow=newBMap.InfoWindow("<pstyle='font-size:14px;'>"+searchResult.keyword+"</p>");marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画});}console.info(pointArray);</script></html>
第一次写欢迎大家来吐槽指正