功能一里面有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. IntelliJ IDEA 在网页修改数据，但是在浏览器刷新的时候，不能读取到修改之后的数据

    使用IntelliJ IDEA 在网页修改数据,但是在浏览器刷新的时候,不能读取到修改之后的数据? 解决办法:tomcat配置中,On frame deactivation属性选择Update cla ...

  2. Centos 6.5编译安装yum

    1.删除redhat原有的yum rpm -aq|grep yum|xargs rpm -e --nodeps 2.下载yum安装文件 wget http://mirrors.163.com/cent ...

  3. windows系统下在dos命令行kill掉被占用的pid (转)

    原文出自:http://www.2cto.com/os/201304/203771.html   windows系统下在dos命令行kill掉被占用的pid   1.开始-->运行-->c ...

  4. JS跨域解决iframe高度自适应（IE8/Firefox/Chrome适用）

    参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...

  5. NULL指针、零指针、野指针

    1.1.空指针 如果 p 是一个指针变量,则 p = 0; p = 0L; p = '\0'; p = 3 - 3; p = 0 * 17;p=(void*)0; 中的任何一种赋值操作之后, p 都成 ...

  6. 【python】python定时器

    #coding:utf-8 import os import time def print_ts(message): print "[%s] %s"%(time.strftime( ...

  7. linux tar

    转自:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压 ...

  8. 开始python学习了

    今晚折腾了半天,终于在mac上把python开发ide搞好了. 本来是打算使用eclipse+pydev的,结果在eclipse marketplace里面搜索到得pydev插件无法安装,一直是提示网 ...

  9. 小例子 熟悉jquery

    <div class="tab-head"> <h2 id="tab1" class="selected">JQGr ...

  10. Oracle补习班第八天

    The best hearts are always the bravest. 心灵最高尚的人,也总是最勇敢的人. 1,权限.角色.与用户 创建用户 create user aa identified ...