先看效果:
输入关键词,搜索并地图定位,如没有相关项,可手动拖动标注到指定位置,并获取经纬度。
JS代码:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_AK"></script> <script type="text/javascript"> <?php if(empty($info['location'])){?> var point = new BMap.Point(110.302225,25.281531); <?php }else{?> var point = new BMap.Point(<?php echo $loc_x?>,<?php echo $loc_y?>); <?php }?> // 百度地图API功能 function G(id) { return document.getElementById(id); } //var point = new BMap.Point(position); var map = new BMap.Map("allmap"); map.centerAndZoom(point,18); // 初始化地图,设置城市和地图级别。 var marker = new BMap.Marker(point); // 创建标注 marker.enableDragging(); // 可拖拽 marker.addEventListener("dragend", getloc);//拖曳结束获取坐标 map.addOverlay(marker); // 将标注添加到地图中 map.panBy(300,150);//根据map图层大小位移 var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "position" ,"location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); //比例尺 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮 map.addControl(top_right_navigation); function setPlace(){ map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 18); var marker = new BMap.Marker(pp); //map.addOverlay(marker); //添加标注 marker.enableDragging(); // 可拖拽 p = marker.getPosition(); //获取marker的位置 marker.addEventListener("dragend", getloc);//拖曳结束获取坐标 map.addOverlay(marker); // 将标注添加到地图中 $('#location').val(p.lng+','+p.lat); } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } function getloc(e){ loc = e.point.lng + ", " + e.point.lat; $('#location').val(loc); } </script>
HTML代码:
<div id="allmap" style="width:600px;height:300px;"></div> <input type="text" name="position" id="position" class="input-text" value="<?php echo $info['name']?>" size="50" placeholder="在此输入关键词,自动查询定位"><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> <input type="text" name="info[location]" id="location" value="<?php echo $info['location']?>" size="30" readonly>
转载请注明:小码农 » 百度地图API实战:关键词搜索定位+拖动标注定位