功能一里面有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. bzoj 3531 旅行

    动态开点线段树+树链剖分  对于每一种宗教信仰都开一颗线段树 空间: QlogN 即每一次修改都只会改变logN 个点 时间 O(QlogN)  naive题  边没有开两倍  QAQ bzoj 35 ...

  2. get_headers()函数

    get_headers() 是PHP系统级函数,他返回一个包含有服务器响应一个 HTTP 请求所发送的标头的数组.如果失败则返回 FALSE 并发出一条 E_WARNING 级别的错误信息(可用来判断 ...

  3. [BZOJ 3681]Ariettad

    终于是打完了 CH 上的数据结构专场了…… 不过看样子还有一套 5555 传送门: http://ch.ezoj.tk/contest/CH%20Round%20%2351%20-%20Shinrei ...

  4. LINQ 联表查询 取count 值

    linq to sql 实现左外部连接:var query=from a in A join b in B on a.ID equals b.aID into ab from a1 in ab.Def ...

  5. Java命名规范基础

    一.java命名规范 1.类和接口:由多个单词组成时,所有单词的首字母大写,如TestJava 2.变量名和方法(函数):由多个单词组成时,所有第一个单词的首字母小写,之后每一个单词的首字母大写,如: ...

  6. Maven新建webapp项目index.jsp报错

    最近用eclipse新建了一个maven项目,结果刚新建完成index.jsp页面就报错了,先把错误信息贴出来看看 后来就找资料,结果发现两种解决办法,希望可以帮助用得上的人! 第一种:直接在pom. ...

  7. Three.js开发指南---使用three.js里的各种光源（第三章）

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  8. zepto.js使用前注意

    API:http://www.css88.com/doc/zeptojs_api/ 一.建议:不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的 ...

  9. [系统开发] Python 实现的 Bind 智能 DNS Web 管理系统

    在公司的运营中,DNS还是很重要的,不仅名称解析需要DNS,一些重要的服务,比如负载均衡.HTTP 虚拟主机也会用到它.Bind 手工管理方式有一定的危险性,一旦写错格式就会造成 DNS 服务瘫痪. ...

  10. 去掉mac终端里面hostname提示处的bogon

    打开终端,如果在命令提示$前面显示的主机名变成了bogon,则可以通过命令行修改: sudo scutil --set hostname 新主机名