1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 百度地图 获取地址转换为经纬度

百度地图 获取地址转换为经纬度

时间:2022-09-02 02:17:36

相关推荐

百度地图 获取地址转换为经纬度

最近在项目中用到百度地图,由于以前没有接触过,所以刚开始感觉无从下手;百度地图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>

第一次写欢迎大家来吐槽指正

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。