功能一里面有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. MFC编程 | 非模态对话框的定义

    因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // 非模态对话框的定义 // 通过单文档菜单调用一个非模态窗口 1.首先在工程里插入一个对话框(如:IDD_DLG_TEST ...

  2. C#（转自wiki）

    C#是微软推出的一种基于.NET框架的.面向对象的高级编程语言.C#的发音为"C sharp",模仿音乐上的音名"C♯"(C调升),是C语言的升级的意思.其正确 ...

  3. Python之路，day7-Python基础

    os.system 输出命令结果到屏幕,返回命令执行状态os.popen("dir").read()#会保存命令的执行结果输出py2.7commandscommands.getst ...

  4. DBA-mysql-用户控制

    创建: CREATE USER 'jeffrey'@'localhost'  IDENTIFIED BY 'new_password' PASSWORD EXPIRE; 授权: Grant all o ...

  5. 多线程下的 Lambda表达式 异步 WebClient 读取程序图标，来作为托盘 图标 logo ico

    //读取程序图标,来作为托盘图标this.notifyIcon.Icon = System.Drawing.Icon.ExtractAssociatedIcon(System.Windows.Form ...

  6. linux使用secureCRT连接（没有rsa的时候）

    一台linux新机器,怎么使用secureCRT连接呢??? 首先  vim   /etc/sysconfig/network-scripts/ifcfg-eth0 把BOOTPROTO=none I ...

  7. Android学习笔记（九）

    Android中的四种基本布局 1.LinearLayout LinearLayout称为线性布局,是一种常用的布局.修改activity_main.xml中的代码,如下所示: <LinearL ...

  8. (Xaml) Type 'DeviceA' is not defined.

    修改了一些Xaml, 始终提示 Compiler error(s) encountered processing expression "deviceA.B".Type 'Devi ...

  9. 使用jedis操作redis

    一 连通性 1. 简单代码测试连通性 Jedis jedis = new Jedis(".......", 6379); String keys = "name" ...

  10. 关于Android 打开新的Activity 虚拟键盘的弹出与不弹出

    关于Android 打开新的Activity 虚拟键盘的弹出与不弹出 打开Activity 时  在相应的情况 弹出虚拟键盘 或者 隐藏虚拟键盘 会给用户非常好的用户体验 , 实现起来也比较简单 只需 ...