百度地图 api
首先在百度开发者中心申请ak
在页面head中引用必要的css样式和js脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=个人申请的AK&v=2.0&services=false"></script> <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
地图展示页面,具体的功能已经注释
<body> <div id="content" class="content"> <input type="text" value="" id="keyword" /> <input type="button" name="" id="" value="查询" onclick="search()" /> <div style="width: 600px; height: 500px; border: 0px solid gray" id="container"></div> <p id="tx"></p> <script type="text/javascript"> //创建Map实例 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); //设置中心点 map.centerAndZoom(point, 11); map.setCurrentCity("北京"); //添加鼠标滚动缩放 map.enableScrollWheelZoom(); //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({ isOpen : false, anchor : BMAP_ANCHOR_BOTTOM_RIGHT })); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 map.addControl(new BMap.ScaleControl()); //添加地图类型控件 map.addControl(new BMap.MapTypeControl()); var cr = new BMap.CopyrightControl({ anchor : BMAP_ANCHOR_TOP_RIGHT }); //设置版权控件位置 var bs = map.getBounds(); //返回地图可视区域 cr.addCopyright({ id : 1, content : "<a href='#' style='font-size:16px;'>版权控件</a>", bounds : bs }) //添加版权控件 map.addControl(cr); //全景控件 map.addControl(new BMap.PanoramaControl()); //是否显示路况提示面板 var ctrl = new BMapLib.TrafficControl({ showPanel : false }); ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); map.addControl(ctrl); //圆形覆盖物 var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000, { fillColor : "red" }); map.addOverlay(circle); //设置标注的图标 //var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50)); // 创建标注 var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); //把标注添加到地图上 map.addOverlay(marker); //信息窗口 var content = "<table>"; content = content + "<tr><td> 地点:北京市区</td></tr>"; content = content + "<tr><td> 时间:2016-1-9</td></tr>"; content += "</table>"; var infowindow = new BMap.InfoWindow(content); marker.addEventListener("mouseover", function() { this.openInfoWindow(infowindow); }); marker.addEventListener("mouseout", function() { this.closeInfoWindow(); }); //点击地图,获取经纬度坐标 map.addEventListener("click", function(e) { document.getElementById("tx").innerHTML = "经度坐标:" + e.point.lng + " 纬度坐标:" + e.point.lat; }); //关键字搜索 function search() { var keyword = document.getElementById("keyword").value; var local = new BMap.LocalSearch(map, { renderOptions : { map : map } }); local.search(keyword); } </script> </div> </body>
实现效果图如下:
按照惯例,最后附一个百度在线api:http://developer.baidu.com/map/jsdemo.htm#i1_1
其实,每个新功能通过api都有详细的demo,所以好的api事半功倍