最新消息:imsyx老店新开,原博客因服务器问题,数据全毁,痛心!

百度地图API实战:关键词搜索定位+拖动标注定位

代码分享 tally 1911浏览

先看效果:

QQ20150329001359

 

输入关键词,搜索并地图定位,如没有相关项,可手动拖动标注到指定位置,并获取经纬度。

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实战:关键词搜索定位+拖动标注定位