根据传入地址获取百度地图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页中调用百度地图显示公司位置并且红色标注</title>
</head>
 
<body>
<div id="container" style="width:300px;height:230px;margin:auto;border:1px solid #ddd;overflow:hidden;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
    var map = new BMap.Map("container"); //设置底图
    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();     //启用地图惯性拖拽,默认禁用
 
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小
    function searchByStationName() {
        map.clearOverlays();//清空原来的标注
        var address = "北京市东城文化人才创业园";//查询的详细地址
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            var lng =poi.point.lng;
            var lat =poi.point.lat;
            var point = new BMap.Point(lng,lat);
            var marker = new BMap.Marker(point);
            var label = new BMap.Label(address,{"offset":new BMap.Size(20,-20)});
            var infoWindow = new BMap.InfoWindow(address); 
            map.enableScrollWheelZoom();
            map.centerAndZoom(point, 15);
            marker.setLabel(label); 
            marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});
            map.addOverlay(marker);
            map.addControl(new BMap.NavigationControl());   
            map.addControl(new BMap.ScaleControl());   
            map.addControl(new BMap.OverviewMapControl());
                        
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        });
        localSearch.search(address);
    }
    searchByStationName();        
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用百度地图JavaScript API实现根据经纬度解析详细地址。具体步骤如下: 1. 在HTML文件中引入百度地图JavaScript API的JS文件,并创建一个地图容器。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Baidu Map Example</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script> </head> <body> <div id="map" style="width: 100%; height: 500px;"></div> </body> </html> ``` 其中,ak为开发者ak。 2. 在JS文件中,使用Geocoder类的getLocation方法获取详细地址信息。 ```javascript var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.322987, 39.983424); // 创建点坐标 var geoc = new BMap.Geocoder(); // 创建地址解析器实例 geoc.getLocation(point, function(rs){ var addComp = rs.addressComponents; console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); ``` 其中,getLocation方法的第一个参数为点坐标,第二个参数为回调函数,回调函数的参数rs为详细地址信息对象,其中addressComponents属性包含省、市、区、街道、门牌号等信息。 3. 运行HTML文件,查看控制台输出的详细地址信息。 需要注意的是,使用百度地图JavaScript API需要先获取开发者ak,并在请求API时将ak作为参数传入。另外,需要在百度地图开放平台中开启JavaScript API权限。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值