111144 2016-12-19 02:43 采纳率: 0%
浏览 1858

百度地图api根据缩放等级显示不同的marker点

求大神帮助一下,在百度地图api中根据不同的地图缩放等级显示不同的marker点, 我marker点的坐标是从数据库中得到的,下面是我在jsp上写的代码。

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title> 

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>

<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:90%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP">
</script>
<script type="text/javascript">
var markers = [];
$(document).ready(function() {

    getdata();
    initMap();
    setInterval("frash()",3000); 
    });

function frash(){
    map.clearOverlays();//清空地图上标注点
    getdata();
    addMapOverlay();
    markers.splice(0,markers.length);//清空数组
}

function getdata(){

    $.ajax({
        url:"dituList.do",
        type:"post",
        success:function(data){
            $.each(data,function(i,d){

            markers[i]={content:"我的备注",title:d.title,imageOffset:{width:0,height:3},position:{lat:d.jd,lng:d.wd}};
            });

        }

    });
}




</script>
  </head>
  <body>
<!-- <form action="dituSave.do" method="post">
<div class="form-group">
<label>经度</label>
<input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%">
</div>

<div class="form-group">
<label>纬度</label>
<input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%">
</div>

<div>
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong>
</button></div>

</form>
 -->



    <!--百度地图容器-->
    <div style="width:100%;height:100%;border:#ccc solid 1px;font-size:12px" id="map"></div>



  </body>
  <script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        //alert("111"+markers[1].position.lat);
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); //建树Map实例
      map.centerAndZoom(new BMap.Point(118.059014,36.812474),13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();//启用地图滚轮放大缩小
      map.enableKeyboard();//启用键盘上下左右键移动地图
      map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
      map.enableDoubleClickZoom()//启用鼠标双击放大,默认启用(可不写)
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
       bb     target.openInfoWindow(window);
      });
    }



    //设置点Icon
    function addMapOverlay(){
        //alert(markers.length+"22222");
        //alert(markers[1].position.lat+"33333");
    /*  var markers = [
        {position:{lat:36.79,lng:118.06}},
        {position:{lat:36.81,lng:118.06}},
        {position:{lat:36.81,lng:118.04}},
        {position:{lat:36.81,lng:118.05}}
      ];

    var markers = [
        {content:"我的备注",title:"我的标记",imageOffset: {width:0,height:3},position:{lat:36.831635,lng:118.050432}}
      ];


      alert(markers);*/
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
         imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height) 
        })});


        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)}); //a
        var opts = {  //a
           width: 200, //a
          title: markers[index].title,  //a 
          enableMessage: false  //a
        };   //a
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts); //a
        marker.setLabel(label);//显示地理名称 a 
       // marker.setLabel();//不显示地理名称 a     
        addClickHandler(marker,infoWindow); //a
        map.addOverlay(marker);
      };
    }

    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
    //  initMap();
  </script>
</html>

我现在改的代码 是3秒钟在页面刷新一次数据库的信息,并把marker点的信息标注在地图上,
我想在我原来代码的基础上加上一下功能,
随着地图缩放的等级显示不同的marker点。

  • 写回答

1条回答 默认 最新

  • dabocaiqq 2016-12-31 09:41
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘