百度地图Api 接口实例标记点源码分享

来源：互联网发布：电脑监控软件排行编辑：程序博客网时间：2024/05/19 19:57

<%@ 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>


<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>

0 0

百度地图Api 接口实例 标记点源码分享

百度地图Api 接口实例标记点源码分享