• 引入百度api、js和地图样式

 

 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

 

 

 

 

 

 

  • 初始化地图

 

 

var map = new BMap.Map("popClsbox");//在百度地图容器中创建一个地图
	 window.map=map;
    createMap();//创建地图
	function createMap() {
	        map.centerAndZoom("上海", 12);//定义一个中心点坐标
		map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
		map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
		map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
		map.enableScrollWheelZoom(); //启用滚轮放大缩小
		map.addControl(new BMap.MapTypeControl({
			mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
		}));		
	}

 

  • 给地图添加右菜单

 

 

 

function createMap() {
	        同上内容...
		var contextMenu = new BMap.ContextMenu();
		var txtMenuItem = [
				{
					text : '放置到最大级',
					callback : function() {
						map.setZoom(18);
					}
				},
				{
					text : '查看全国',
					callback : function() {
						map.setZoom(4);
					}
				} ];
		for ( var i = 0; i < txtMenuItem.length; i++) {
			contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,
					txtMenuItem[i].callback, 100));
			if (i == 1 || i == 3) {
				contextMenu.addSeparator();
			}
		}
		map.addContextMenu(contextMenu);
	}

 

 

 

 

 

 

  • 初始化时自动添加坐标

 

 

<%
        给页面传递一个maps集合，对应一下展示
	if(mapmodels!=null&&mapmodels.size()>0){
		for(int i=0;i<mapmodels.size();i++){
			Mapmodels mapmodel=mapmodels.get(i);
			%>
			var point = new BMap.Point(<%=map.getX() %>, <%=mapmodel.getY() %>); //初始化地图中心点
			var marker<%=i%> = new BMap.Marker(point); //初始化地图标记
			map.addOverlay(marker<%=i%>); //在地图中添加marker
			<%
		}
	}
	%>

 

 

 

 

 

 

  • 给坐标添加tip信息窗口

 

 

如使用tip 信息窗口展示，直接替换上面内容,内容中粗体字为添加tip内容
<%
       给页面传递一个maps集合，对应一下展示
	if(mapmodels!=null&&mapmodels.size()>0){
		for(int i=0;i<mapmodels.size();i++){
			Mapmodels mapmodel=mapmodels.get(i);
			%>
			var point = new BMap.Point(<%=map.getX() %>, <%=mapmodel.getY() %>); //初始化地图中心点
			<strong>var manage='自定义tip信息窗口显示的内容';			
			例如：manage +='<p>地址：<%=mapmodel.getAddress() %></p>';			
			//创建检索信息窗口对象
			var searchInfoWindow<%=i%> = null;
			searchInfoWindow<%=i%> = new BMapLib.SearchInfoWindow(map, manage, {
					title  : "<%=mapmodel.getName() %>",      //标题，此处可自定义html内容
					width  : 458,             //宽度
					height : 150,              //高度
					enableAutoPan : true,     //自动平移
					enableSendToPhone: false,
					searchTypes :[]
				});</strong>
			var marker<%=i%> = new BMap.Marker(point); //初始化地图标记
			<strong>marker<%=i%>.addEventListener("click", function(e){
			    searchInfoWindow<%=i%>.open(marker<%=i%>);
			});</strong>
			map.addOverlay(marker<%=i%>); //在地图中添加marker
			<%
		}
	}
%>

 

 

 

 

 

 

 

 

 

本文主要针对展示页面来进行总结，不包含后台录入坐标，后期会逐步加上，谢谢！

以下部分不针对mapabc，也不高捧百度地图，完全是个人经验所得，如有异议可评论，请谅解！

经验总结：我在使用地图过程中，首先使用的mapabc 然后转为 百度地图，主要原因是由于 坐标在录入时，通过 检索等方式查找某个地址时，mapabc 针对检索的内容太过于广泛或者可以说缺乏详细搜索，从而无法精确的查找到大部分地址，所以改从使用百度地图，该地图在搜索方面比较晚上，它的数据精确度很高，可以快速的查找到某个地址从而进行准确定位。再一个就是考虑到百度地图针对目前行业来说，地图做的还是想当可以的，所以个人推荐入使用地图，尽量使用百度地图。