位置:首页  >   前端编程  > 百度地图api获取坐标及地址

百度地图api获取坐标及地址

业务需求:从地图中单机地图上一点,获取他的经纬度坐标和此点的详细地址,并且改地址可以进行手动编辑。
项目:旅游项目app,商家后台管理中商家添加旅游景点门票操作。
效果如图:
map-1.png
参考百度的示例:js web开发-javascript API 大众版-》逆/地理编码 对应的网址:http://developer.baidu.com/map/jsdemo.htm#i7_2
代码如下:
头部引入:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己AK"></script>

    <script type="text/javascript">


        var map = new BMap.Map("container");
        map.centerAndZoom("北京", 12);
        map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
        var geoc = new BMap.Geocoder();
        function searchByStationName(){
            var keyword = document.getElementById("text_").value;
              map.addEventListener('click', function(e){
                  var lngLat= e.point;  
                  var lngLatStr =lngLat.lng + "," + lngLat.lat;
                  document.getElementById("result_").value=lngLatStr;
                  geoc.getLocation(lngLat, function(rs){
            var addComp = rs.addressComponents;
            var adress=addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber;
                  document.getElementById("text_").value=adress;
        });


            });    


            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(keyword);
        }
</script>


总结:此段代码使用了百度地图的核心类中map类,服务类中的Geocoder  网址http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%9C%8D%E5%8A%A1%E7%B1%BB/Geocoder

0
文章属性
精彩评论