百度地图显示多个点

最新推荐文章于 2024-09-17 10:35:58 发布

mfc2003

最新推荐文章于 2024-09-17 10:35:58 发布

阅读量3.7k

点赞数 1

分类专栏：百度地图文章标签：百度地图

本文链接：https://blog.csdn.net/mfc2003/article/details/77334077

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码：

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

效果：