功能一里面有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() {

         initMap();//显示地图

         setInterval("frash()", 3000); //定时器，每3秒调用frash()

     });

     function getdata() {

         $.ajax({

             url : "dituList.do",

             type : "post",

             success : function(data) {

                 $.each(data, function(i, d) {

                     markers[i] = {

                         content : "我的备注",

                         title : d.title,

                         imageOffset : {

                             width : -46,

                             height : -21

                         },

                         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() {

             target.openInfoWindow(window);

         });

     }

     function frash() {

         map.clearOverlays();//清空地图上标注点

         getdata(); //获得marker点的数组

         addMapOverlay(); //将marker点的信息显示在地图上

         markers.splice(0, markers.length);//清空数组

     }

     //设置点Icon

     function addMapOverlay() {

         var u = map.getZoom(); // 定义地图缩放等级的变量

         if (u >= 13) {   // 如果缩放等级大于等于13

             //把marker点的信息显示在地图上

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

             }

         //地图缩放等级小于13不显示marker点

         else{

         }

         }

     }

     //向地图添加控件

     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>

百度地图api根据地图缩放等级显示不同的marker点，功能二的更多相关文章

  1. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  2. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  3. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  4. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  5. 百度地图API 级别自动缩放

    今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...

  6. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  7. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. 百度地图API开发一——仿照现有测距效果实现测面功能

      最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下: 这个效果体验很好 ...

  9. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

随机推荐

  1. Android Saving Data(二)

    Saving File android读写文件的形式和普通的java IO的方式并没有什么不同,唯一有所限制的是当我们创建文件的时候不能够在像javaSE那样随意了.一般android读写文件有两种形 ...

  2. 【转载】关于在vs2013中配置opengl红宝书第八版环境

     本文为转载 原文地址 http://blog.csdn.net/qq821869798/article/details/45247241 本人刚开始学习opengl,买了一本opengl红宝书第八版 ...

  3. python property详解

    Python中有一个被称为属性函数(property)的小概念,它可以做一些有用的事情.在这篇文章中,我们将看到如何能做以下几点: 将类方法转换为只读属性 重新实现一个属性的setter和getter ...

  4. Hibernate的save()和persist()的区别

    hibernate之所以提供与save()功能几乎完全类似的persist()方法,一方面是为了照顾JPA的用法习惯.另一方面,save()和 persist()方法还有一个区别:使用 save() ...

  5. 成员资格、授权 – ASP.NET MVC 4 系列

           ASP.NET MVC 不像 ASP.NET WEB FORMS 那样提供了很多自动保护机制来保护页面不受恶意用户的攻击,更明确的说,后者是致力于使应用程序免受攻击: 服务器组件对显示的 ...

  6. 图片垂直居中 和 float

    //图片垂直居中, display:table-cell; vertical-align:middle;   不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...

  7. svn提交报e200007错误

    org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决,svncommitfailed 首先2分钟前 ...

  8. solr6.0.0 + tomcat8 配置问题

    中间件需求: apache-tomcat-8.0.32.tar.gz jdk-8u74-linux-x64.rpm solr-6.0.0.zip 0.安装java JDK rpm -ivh jdk-8 ...

  9. http请求相关

    1.POST方式向服务器发送AJAX请求时   设置请求头 application/x-www-form-urlencoded 2.表单上传文件时     设置请求头 multipart/form-d ...

  10. Mac下Virtual Box Host-Only网络配置

    Mac下的虚拟机其实有很多,Parallels.VMware Fusion.Virtual Box都不错,Parallels是目前试过感觉最好的,Fusion装64位系统驱动支持似乎不完善,而且混合模 ...