百度地图显示多个点

来源:互联网 发布:网络签约写手的收入 编辑:程序博客网 时间:2024/06/01 09:32


代码:


<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@include file="../common/include.jsp" %><html><head>    <base href="<%=basePath%>">    <title>地图工具</title>    <style>        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  .breadcrumb{      margin-bottom: 5px;  }    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=啊"></script></head><body><ol class="breadcrumb">    <li><span class="glyphicon glyphicon-home"></span><a href="javascript:void(0)">  首页</a></li>    <li><a href="javascript:void(0)">客户管理</a></li>    <li><a href="javascript:void(0)">地图工具</a></li></ol>    <div id="allmap"></div></body><script type="text/javascript">    // 百度地图API功能 // 后台返回的points数据格式    // [{"id":"00896270834722824194","name":"南昌市象湖风景区管理处","address":"江西省南昌市艾湖村","link_man":"张4","link_phone":"18173453289","del":1,"gpsx":115.963066,"gpsy":28.64721},{"id":"00896269799669260290","name":"贝尔乐幼儿园","address":"江西省南昌市百家姓","link_man":"张3","link_phone":"13478723456","del":1,"gpsx":115.463066,"gpsy":28.533}]    tempData=${points};    var map = new BMap.Map("allmap" );    map.enableScrollWheelZoom();    var point = new BMap.Point(115.928574,28.668889); // 创建点坐标 南昌火车站为中心的    map.centerAndZoom(point,11);    map.setMapStyle({style:'midnight'});  //  var myIcon = new BMap.Icon("%=basePath%>/img/favicon.ico", new BMap.Size(300,157));    var point = new Array(); //存放标注点经纬信息的数组    var marker = new Array(); //存放标注点对象的数组    var info = new Array(); //存放提示信息窗口对象的数组    for (var i = 0; i < tempData.length; i++) {        point[i] = new window.BMap.Point(tempData[i].gpsx,tempData[i].gpsy); //循环生成新的地图点      //  marker[i] = new window.BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记        marker[i] = new window.BMap.Marker(point[i] );        map.addOverlay(marker[i]);        var label = new window.BMap.Label(tempData[i].name, { offset: new window.BMap.Size(20, -10) });        label.setStyle({            color : "red",            fontSize : "12px",            height : "20px",            margin:0,            padding:0,            border:0,            lineHeight : "20px",            fontFamily:"微软雅黑"        });        marker[i].setLabel(label);        info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + tempData[i].name + "</br>地址:" + tempData[i].address + "</br> 联系人:" + tempData[i].link_man + "</br> 联系电话:" + tempData[i].link_phone + "</br></p>"); // 创建信息窗口对象    }    for (var i = 0; i < tempData.length; i ++)    {        addInfo(info[i],marker[i]);     }    function addInfo(info,marker){        marker.addEventListener("click", function(){this.openInfoWindow(info);});    }</script></html>





效果: