- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- <title>Document</title>
- <style>
- #map_container {
- width: 1005px;
- margin: 0 auto;
- }
- #rMap {
- width: 600px;
- height: 500px;
- float: left;
- }
- #lSearch {
- width: 300px;
- height: 500px;
- float: left;
- }
- td {
- width: 100px;
- }
- </style>
- <script type="text/javascript" src1="js/jquery-1.10.2.min.js"></script>
- <script type="text/javascript" src1="http://api.map.baidu.com/api?v=1.5&ak=密钥"></script>
- <script type="text/javascript" src1="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
- <link rel="stylesheet" />
- </head>
- <body>
- <input type="text" id="longitude" hidden/>
- <input type="text" id="latitude" hidden/>
- <div class="bg_cover"></div>
- <div id="map_container">
- <div id="rMap"></div>
- <div id="lSearch">
- <table>
- <tr>
- <td>省份</td>
- <td><input type="text" class="txtProvince"/></td>
- </tr>
- <tr>
- <td>市</td>
- <td><input type="text" class="txtCity"/></td>
- </tr>
- <tr>
- <td>具体地址</td>
- <td><input type="text" class="txtDetail"/></td>
- </tr>
- <tr>
- <td>
- <button id="btnSearch">search</button>
- </td>
- </tr>
- </table>
- </div>
- </div>
- <script>
- $(function () {
- var map = new BMap.Map("rMap");//创建地图实例
- var point = new BMap.Point(116.404, 39.915);//初始设置地图中心点,为天安门
- map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
- map.setCurrentCity("北京");
- map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
- map.centerAndZoom(point, 15);
- creatMarker();
- $("#btnSearch").click(function () {
- var txt = $(".txtProvince").val() + $(".txtCity").val() + $(".txtDetail").val();
- var lng, lat;
- if (txt != "") {
- var localSearch = new BMap.LocalSearch(map);
- map.clearOverlays();//清空原来的标注
- localSearch.setSearchCompleteCallback(function (searchResult) {
- var poi = searchResult.getPoi(0);
- lng = poi.point.lng;
- lat = poi.point.lat;
- map.centerAndZoom(poi.point, 15);
- point = new BMap.Point(poi.point.lng, poi.point.lat);
- creatMarker();
- });
- localSearch.search(txt);
- }
- })
- //创建地图遮盖物
- function creatMarker() {
- var marker = new BMap.Marker(point); // 创建标注
- map.addOverlay(marker); // 将标注添加到地图中
- marker.enableDragging(); //标注可拖拽
- marker.addEventListener("click", function (e) {
- searchInfoWindow.open(marker);
- })
- marker.addEventListener("dragend", function (e) { //监听标注的dragend事件,获取拖拽后地理坐标
- $("#longitude").val(e.point.lng);
- $("#latitude").val(e.point.lat);
- var pt = e.point;
- })
- var label = new BMap.Label("拖动图标可以定位哦~", {offset: new BMap.Size(20, -10)});
- marker.setLabel(label);
- map.addOverlay(marker); //在地图中添加marker
- marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
- };
- })
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1612201514232.html
来源: http://www.codesnippet.cn/detail/1612201514232.html