百度地图Api 接口实例 标记点源码分享
2015-03-16 11:23
246 查看
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAP</title>
<script type="text/javascript" src="<s:url value="/" />js/jquery.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery.validate.min.js"></script>
<!-- 检测用户位置IP API -->
<script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DqBFd4FXWonuaMNfGDRU0eEm"></script>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// 百度地图API功能
//创建对象
var map = new BMap.Map("allmap");
//获取中心坐标点
map.centerAndZoom(remote_ip_info["city"], 6);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角，仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，仅包含缩放按钮
//后台获取数据
$.getJSON($('#baseUrl',window.parent.document).val()+'allTrayLocation.action',function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
// 创建标注
var marker = new BMap.Marker(new BMap.Point(item.longitude,item.latitude));
map.addOverlay(marker); // 将标注添加到地图中
//设置标注点内容
var arrayObj = new Array();
arrayObj[0]="服务站："+item.serviceStationName+"<br>";
arrayObj[0]=arrayObj[0] +"地址："+item.provinceName+item.cityName+item.districtName+item.street;
arrayObj[1]=item.serviceStationId;
addClickHandler(arrayObj,marker);
});
});
//标记点点击函数 处理
function addClickHandler(arrayObj,marker){
marker.addEventListener("click",function(e){
var content=arrayObj[0];
content=content+ "<table class='gridtable'> <thead><tr><th>托盘类型</th>";
content=content+ "<th>数量</th></tr></thead><tbody>";
var param="gis.serviceStationId="+arrayObj[1];
//获取标注点详情内容
$.getJSON($('#baseUrl',window.parent.document).val()+'trayDetail.action',param,function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
content=content +"<tr><td>" + item.palletTypeName + "</td>";
content=content +"<td>" + item.total + "</td></tr>";
});
content=content +"</tbody></table>"
openInfo(content,e)
});
});
}
//设置信息窗口打开时间
function openInfo(content,e){
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); //开启信息窗口
}
//设置消息窗口
var opts = {
title : "详情：" ,
enableMessage:false,
width : '0',
height: '0'
};
</script>
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAP</title>
<script type="text/javascript" src="<s:url value="/" />js/jquery.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery.validate.min.js"></script>
<!-- 检测用户位置IP API -->
<script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DqBFd4FXWonuaMNfGDRU0eEm"></script>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// 百度地图API功能
//创建对象
var map = new BMap.Map("allmap");
//获取中心坐标点
map.centerAndZoom(remote_ip_info["city"], 6);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角，仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，仅包含缩放按钮
//后台获取数据
$.getJSON($('#baseUrl',window.parent.document).val()+'allTrayLocation.action',function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
// 创建标注
var marker = new BMap.Marker(new BMap.Point(item.longitude,item.latitude));
map.addOverlay(marker); // 将标注添加到地图中
//设置标注点内容
var arrayObj = new Array();
arrayObj[0]="服务站："+item.serviceStationName+"<br>";
arrayObj[0]=arrayObj[0] +"地址："+item.provinceName+item.cityName+item.districtName+item.street;
arrayObj[1]=item.serviceStationId;
addClickHandler(arrayObj,marker);
});
});
//标记点点击函数 处理
function addClickHandler(arrayObj,marker){
marker.addEventListener("click",function(e){
var content=arrayObj[0];
content=content+ "<table class='gridtable'> <thead><tr><th>托盘类型</th>";
content=content+ "<th>数量</th></tr></thead><tbody>";
var param="gis.serviceStationId="+arrayObj[1];
//获取标注点详情内容
$.getJSON($('#baseUrl',window.parent.document).val()+'trayDetail.action',param,function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
content=content +"<tr><td>" + item.palletTypeName + "</td>";
content=content +"<td>" + item.total + "</td></tr>";
});
content=content +"</tbody></table>"
openInfo(content,e)
});
});
}
//设置信息窗口打开时间
function openInfo(content,e){
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); //开启信息窗口
}
//设置消息窗口
var opts = {
title : "详情：" ,
enableMessage:false,
width : '0',
height: '0'
};
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 基础实例源码分享
- 基于.NET 的WebSocket 的简单实例 --- 源码分享
- 分享45个android实例源码，很好很强大.收藏吧！！！
- HTML5视频音频播放器实例和源码分享（一）
- 分享简单实用的jQuery图片播放实例和源码
- c++中vector源码及其接口函数实例【4】
- 分享45个android实例源码，很好很强大.收藏吧！！！
- 分享45个android实例源码，很好很强大
- 分享45个android实例源码，很好很强大.收藏吧！！！
- Android网络收音机项目(源码实例分享)
- php webservice 短信接口源码 分享一下
- 分享45个android实例源码【转载】
- 分享45个android实例源码，很好很强大.收藏吧
- 分享45个android实例源码，很好很强大
- 45个android实例源码分享
- (文章)分享功能 & RSS订阅到Google,Yahoo,qq邮箱的接口源码
- 分享45个android实例源码，很好很强大.收藏吧
- 分享45个android实例源码，很好很强大.收藏吧！！！
- 分享45个android实例源码
- Android网络收音机项目(源码实例分享)