百度地图JSP展示数据

//百度地图API功能

//默认参数配置
var params = {
	zoom : 6,
	searchSize : 11,
	clickMapSize : 18,
	isAnimation : true,
	icon : null,
	tipTitle : "",
	allmapId : "allmap",
	searchId : "suggestId",
	searchResultId : "searchResultPanel"
};

//添加提示信息 width : 250, height: 80,
var opts = {
	width : 470,
	title : params.tipTitle, // 信息窗口标题
	enableMessage : true
};

// 初始化参数
function setParams(cfg) {
	if (cfg == false) {
		return;
	}
	if (cfg.zoom) {
		params.zoom = cfg.zoom;
	}
	if (cfg.tip_title) {
		params.tip_title = cfg.tip_title;
	}
	if (cfg.id_allmap) {
		params.id_allmap = cfg.id_allmap;
	}
	if (cfg.searchId) {
		params.searchId = cfg.searchId;
	}
	if (cfg.searchResultId) {
		params.searchResultId = cfg.searchResultId;
	}
	if (cfg.isAnimation) {
		params.isAnimation = cfg.isAnimation;
	}
	if (cfg.icon) {
		params.icon = cfg.icon;
	}
}

// 创建地图 根据 ip 定位
var map;

function create(){
	createMap();
	addPanoramaControl();
	addNavigationControl();
	addMapTypeControl();
	addgeolocationControl();
	map.setMapStyle({style:'grassgreen'});
}
function createMap() {
	map = new BMap.Map(params.allmapId);
	map.centerAndZoom("延安",params.zoom);  
//	myCity = new BMap.LocalCity();
//	var point = new BMap.Point(108.951661,34.265151);
	/* 鼠标操作 */
	map.enableScrollWheelZoom(true);
	map.enableContinuousZoom(true);
}
//定位函数
geolocation = new BMap.Geolocation();
function center(){
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			map.centerAndZoom(r.point,params.searchSize);  
		}
		else {
			alert('定位失败：'+this.getStatus());
		}        
	},{enableHighAccuracy: true});
}
//定位城市
function myFun(result) {
	var cityName = result.name;
	map.setCenter(cityName);
	map.centerAndZoom(cityName, params.searchSize);
//	setTimeout(function(){
//		map.centerAndZoom(cityName, params.searchSize);
//	},7000);
}

//添加全景控件
function addPanoramaControl(x, y) {
	if (!x) {
		x = 8;
	}
	if (!y) {
		y = 220;
	}
	map.addTileLayer(new BMap.PanoramaCoverageLayer());
	var stCtrl = new BMap.PanoramaControl({
		anchor : BMAP_ANCHOR_TOP_LEFT
	});
	stCtrl.setOffset(new BMap.Size(x, y));
	map.addControl(stCtrl);
};

//左上角，添加默认缩放平移控件
function addNavigationControl(x, y) {
	if (!x) {
		x = 0;
	}
	if (!y) {
		y = 0;
	}
	top_left_navigation = new BMap.NavigationControl();
	top_right_navigation = new BMap.NavigationControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT
	}); // 右上角，仅包含平移和缩放按钮
	top_right_navigation.setOffset(new BMap.Size(x, y));
	/*
	 * 缩放控件type有四种类型:
	 * BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
	 */
	// 添加控件和比例尺
	// map.addControl(top_left_control);
	map.addControl(top_left_navigation);
}
//左上角，添加比例尺
function addScaleControl(x, y) {
	if (!x) {
		x = 5;
	}
	if (!y) {
		y = 2;
	}
	top_left_control = new BMap.ScaleControl({
		anchor : BMAP_ANCHOR_TOP_LEFT
	});
	// {anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}
	top_right_control = new BMap.ScaleControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT
	});
	// 右上角，添加比例尺
	top_left_control.setOffset(new BMap.Size(x, y));
}

// 移除控件和比例尺
function delete_control() {
	map.removeControl(top_left_control);
	map.removeControl(top_left_navigation);
	map.removeControl(top_right_navigation);
}

//添加地图类型和缩略图
function addMapTypeControl(x, y) {
	if (!x) {
		x = 5;
	}
	if (!y) {
		y = 8;
	}
	var mapType1 = new BMap.MapTypeControl({
		mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
	});
	var mapType2 = new BMap.MapTypeControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT
	});
	mapType2.setOffset(new BMap.Size(x, y));

	var overView = new BMap.OverviewMapControl();
	var overViewOpen = new BMap.OverviewMapControl({
		isOpen : true,
		anchor : BMAP_ANCHOR_BOTTOM_RIGHT
	});
	map.addControl(mapType2); // 左上角，默认地图控件
	map.addControl(overView); // 添加默认缩略地图控件
	map.addControl(overViewOpen); // 右下角，打开
}

// 添加定位控件
function addgeolocationControl() {
	geolocationControl = new BMap.GeolocationControl();
	geolocationControl.addEventListener("locationSuccess", function(e) {
		// 定位成功事件
		var address = '';
		address += e.addressComponent.province;
		address += e.addressComponent.city;
		address += e.addressComponent.district;
		address += e.addressComponent.street;
		address += e.addressComponent.streetNumber;
	});
	geolocationControl.addEventListener("locationError", function(e) {
		// 定位失败事件
		alert(e.message);
	});
	map.addControl(geolocationControl);
}

/* 提示信息与按地址逆向查询经度纬度 */
myGeo = new BMap.Geocoder();
function geocodeSearch(address, content, tip,message) {
	myGeo.getPoint(address, function(point) {
		if (point) {
			var address = new BMap.Point(point.lng, point.lat);
			addMarker(address, content, tip,message);
		}
	});
}

function getProvinceByPoint(){
	
}

// 编写自定义函数,创建标注
function addMarker(point, content, tip,message) {
	var marker;
	if (params.icon) {
		marker = new BMap.Marker(point, {
			icon : params.icon
		});
	} else {
		marker = new BMap.Marker(point);
	}
	if (tip) {
		marker.setTitle(tip);
	}
	map.addOverlay(marker);
	addClickHandler(content, marker, point,message);
	if (params.isAnimation) {
		marker.setAnimation(BMAP_ANIMATION_DROP); // 跳动的动画 BMAP_ANIMATION_DROP
	}
}
// 点击门店图标，弹出提示内容
function addClickHandler(content, marker, address,tip) {
	marker.addEventListener("click", function(e) {
		if (address) {
			map.setCenter(address);
		}
		openInfo(content, e,tip);
	});
}

// 打开内容提示信息
function openInfo(content, e,tip) {
	opts.message = tip;
	var p = e.target;
	var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
	var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
	map.openInfoWindow(infoWindow, point); // 开启信息窗口
	map.centerAndZoom(point, params.clickMapSize);
}


//关键字检索
function G(id) {
	return document.getElementById(id);
}
var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
{
	"input" : params.searchId,
	"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(params.searchResultId).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(params.searchResultId).innerHTML = "onconfirm<br />index = "
			+ e.item.index + "<br />myValue = " + myValue;
	setPlace();
});

var prev_local = null;
function setPlace() {
	if (prev_local) {
		map.removeOverlay(prev_local); // 清除地图上覆盖物
		prev_local = null;
	}
	function _myFun() {
		var pp = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果
		var marker = new BMap.Marker(pp);
		map.setCenter(pp);
		map.centerAndZoom(pp, params.searchSize);
		prev_local = marker;
		map.addOverlay(marker); // 添加标注
		marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画 BMAP_ANIMATION_DROP
		marker.setTitle(myValue);
		addClickHandler(myValue, marker);
		marker.enableDragging();           // 可拖拽
	}
	var local = new BMap.LocalSearch(map, { // 智能搜索
		onSearchComplete : _myFun
	});
	local.search(myValue);
}

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

#allmap {
	width: 100%;
	height: 100%;
}

p {
	margin-left: 5px;
	font-size: 14px;
}

span {
	font: 14px '微软雅黑';
}

#search {
	height:35px;
	position: absolute;
	top: 5px;
	left: 0px;
	width: 100%;
	border:solid 0px;
	display: none;
}

#r-result input {
	width: 250px;
	height: 23px;
	background: #FFFAFA;
	font: 13px '微软雅黑';
	border-radius: 4px;
	padding: 2px;
	border: solid 1px #8DB6CD;
	padding-left: 5px;
	position: absolute;
	display: block;
	cursor: pointer;
}
#r-result span {
	position: absolute;
	cursor: pointer;
	padding-top: 3px;
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=HqkqTNriWCoItTPyirDYAVQ8"></script>
<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="search">
		<div id="l-map"></div>
		<div id="r-result">
<!-- 			<span>地址：</span> -->
			<input type="text" id="suggestId" size="20" placeholder="搜索地址" />
		</div>
		<div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;">
		</div>
	</div>
</body>
<script type="text/javascript">
data = [ {
	"name" : "张三",
	"address" : "北京",
	"phone" : "11223",
	"state" : 0
}, {
	"name" : "李四",
	"address" : "上海市",
	"phone" : "11224",
	"state" : 1
	
}, {
	"name" : "王五",
	"address" : "深圳",
	"phone" : "11225",
	"state" : 0
}, {
	"name" : "赵六",
	"address" : "广州",
	"phone" : "11226",
	"state" : 1
}, {
	"name" : "刘德华",
	"address" : "东莞",
	"phone" : "22222",
	"state" : 0
}, {
	"name" : "张学友",
	"address" : "天津",
	"phone" : "33333",
	"state" : 1
}, {
	"name" : "李易峰",
	"address" : "湖北",
	"phone" : "44444",
	"state" : 1
}, {
	"name" : "安利",
	"address" : "湖南",
	"phone" : "55555",
	"state" : 0
}, {
	"name" : "TOM",
	"address" : "长沙",
	"phone" : "66666",
	"state" : 1
}, {
	"name" : "JACK",
	"address" : "四川",
	"phone" : "77777",
	"state" : 1
}, {
	"name" : "LISA",
	"address" : "杭州",
	"phone" : "888888",
	"state" : 1
} ];
</script>
<script type="text/javascript" src="js/mapx.js"></script>
<script type="text/javascript">
	create();
	searchCenter();
	//获取数据
	$(function() {
		var content_prefix = '<span style="margin-top:5px;color:green;">';
		var content_suffix = '</span><br>';
		var _bossName = '老板姓名： ';
		var _phone = '联系电话： ';
		var _dept = '机构地址： ';
		var _state = '合作状态： ';
		var _newline = '\n';
		var statName = ['未合作','已合作'];
		
		for (var i = 0; i < data.length; i++) {
			var bos = data[i];
			var content = "";
			var tip = "";
			content += content_prefix+ _bossName + bos.name + content_suffix;
			content += content_prefix+ _phone + bos.phone + content_suffix;
			content += content_prefix+ _dept + bos.address + content_suffix;
			content += content_prefix+ _state + statName[bos.state] + content_suffix;
			
			tip += _bossName + bos.name + _newline;
			tip += _phone + bos.phone + _newline;
			tip += _dept + bos.address + _newline;
			tip += _state + statName[bos.state] + _newline;
			
			geocodeSearch(bos.address, content,tip);
		}

		$("#allmap").click(function() {
			$("#suggestId").val('');
			$("#search").slideUp(500);
		});
		
		$(window).keydown(function(event){
			 var code = event.keyCode;
			 var css  = $("#search").css("display");
			 if(code==13){
				 $("#search").slideToggle(500);
			 }else if(code==27){
				 $("#search").slideUp(500);
				 $("#suggestId").val('');
				 $("#allmap").focus();
			 }
// 			 console.debug(code);
		});
		
		 $("#suggestId").blur(function(){
			 $("#search").slideUp(500,function(){
				 $("#suggestId").val('');
			 });
		 });
	});
	
	function searchCenter(){
		var _t = $("#suggestId");
		var sum = $("body").width()-_t.width();
		$("#suggestId").css("left",sum/2);
// 		$("#suggestId").prev().css("left",sum/2-43);
	}
	
	$(document).mousemove(function(e){
		var _t = $("#suggestId");
		var sum = $("body").width()-_t.width();
		var begin = sum/2-10;
		var end = sum/2+_t.width()+10;
		if(e.pageX >= begin && e.pageX <=  end && e.pageY<=40){
			 $("#search").slideDown(200);
		}
	});
	
</script>
</html>