示例代码如下,地图大小请自行调节
<!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=gb2312" /> <title>网页地图形式展示公司地址</title> </head> <body> <div id="container" style="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", {mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图 //var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP}); //设置3D图为底图 var map = new BMap.Map("container"); //设置底图 map.centerAndZoom("深圳", 18); //初始化地址,查询的地址所在市 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 var localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //允许自动调节窗体大小 function searchByStationName() { map.clearOverlays();//清空原来的标注 var keyword = "深圳市罗湖区红桂路2068号红桂大厦一楼";//查询的详细地址 localSearch.setSearchCompleteCallback(function (searchResult) { var poi = searchResult.getPoi(0); map.centerAndZoom(poi.point, 18); var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注,为要查询的地方对应的经纬度 map.addOverlay(marker); var content = keyword; var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>"); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); }); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 }); localSearch.search(keyword); } searchByStationName(); </script> </body> </html>