百度地图api根据地图缩放等级显示不同的marker点
功能一里面有marker点后台的代码
根据地图的缩放等级显示不同marker点的坐标JSP代码
<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>地图</title> 10 11 <link href="css/style.css" rel="stylesheet" type="text/css" /> 12 <script type="text/javascript" src="js/jquery.js"></script> 13 14 <style type="text/css"> 15 html { 16 height: 100% 17 } 18 19 body { 20 height: 100%; 21 margin: 0px; 22 padding: 0px 23 } 24 25 #container { 26 height: 90% 27 } 28 </style> 29 <script type="text/javascript" 30 src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP"> 31 </script> 32 <script type="text/javascript"> 33 var markers = []; 34 $(document).ready(function() { 35 initMap();//显示地图 36 setInterval("frash()", 3000); //定时器,每3秒调用frash() 37 }); 38 function getdata() { 39 $.ajax({ 40 url : "dituList.do", 41 type : "post", 42 success : function(data) { 43 $.each(data, function(i, d) { 44 markers[i] = { 45 content : "我的备注", 46 title : d.title, 47 imageOffset : { 48 width : -46, 49 height : -21 50 }, 51 position : { 52 lat : d.jd, 53 lng : d.wd 54 } 55 }; 56 }); 57 } 58 59 }); 60 } 61 </script> 62 </head> 63 <body> 64 <!-- <form action="dituSave.do" method="post"> 65 <div class="form-group"> 66 <label>经度</label> 67 <input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%"> 68 </div> 69 70 <div class="form-group"> 71 <label>纬度</label> 72 <input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%"> 73 </div> 74 75 <div> 76 <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong> 77 </button></div> 78 79 </form> 80 --> 81 <!--百度地图容器--> 82 <div 83 style="width: 100%; height: 100%; border: #ccc solid 1px; font-size: 12px" 84 id="map"></div> 85 </body> 86 <script type="text/javascript"> 87 //创建和初始化地图函数: 88 function initMap() { 89 //alert("111"+markers[1].position.lat); 90 createMap();//创建地图 91 setMapEvent();//设置地图事件 92 addMapControl();//向地图添加控件 93 addMapOverlay();//向地图添加覆盖物 94 } 95 function createMap() { 96 map = new BMap.Map("map"); //建树Map实例 97 map.centerAndZoom(new BMap.Point(118.059014, 36.812474), 13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。 98 99 } 100 function setMapEvent() { 101 map.enableScrollWheelZoom();//启用地图滚轮放大缩小 102 map.enableKeyboard();//启用键盘上下左右键移动地图 103 map.enableDragging(); //启用地图拖拽事件,默认启用(可不写) 104 map.enableDoubleClickZoom()//启用鼠标双击放大,默认启用(可不写) 105 } 106 function addClickHandler(target, window) { 107 target.addEventListener("click", function() { 108 target.openInfoWindow(window); 109 }); 110 } 111 function frash() { 112 113 map.clearOverlays();//清空地图上标注点 114 getdata(); //获得marker点的数组 115 addMapOverlay(); //将marker点的信息显示在地图上 116 markers.splice(0, markers.length);//清空数组 117 } 118 //设置点Icon 119 function addMapOverlay() { 120 var u = map.getZoom(); // 定义地图缩放等级的变量 121 if (u >= 13) { // 如果缩放等级大于等于13 122 //把marker点的信息显示在地图上 123 for (var index = 0; index < markers.length; index++) { 124 var point = new BMap.Point(markers[index].position.lng, 125 markers[index].position.lat); 126 var marker = new BMap.Marker( 127 point, 128 { 129 icon : new BMap.Icon( 130 "http://api.map.baidu.com/lbsapi/createmap/images/icon.png", 131 new BMap.Size(20, 25), 132 { 133 imageOffset : new BMap.Size( 134 markers[index].imageOffset.width, 135 markers[index].imageOffset.height) 136 }) 137 }); 138 var label = new BMap.Label(markers[index].title, { 139 offset : new BMap.Size(25, 5) 140 }); //a 141 var opts = { //a 142 width : 200, //a 143 title : markers[index].title, //a 144 enableMessage : false 145 //a 146 }; //a 147 var infoWindow = new BMap.InfoWindow(markers[index].content, 148 opts); //a 149 marker.setLabel(label);//显示地理名称 a 150 // marker.setLabel();//不显示地理名称 a 151 addClickHandler(marker, infoWindow); //a 152 map.addOverlay(marker); 153 } 154 //地图缩放等级小于13不显示marker点 155 else{ 156 157 } 158 } 159 } 160 //向地图添加控件 161 function addMapControl() { 162 var scaleControl = new BMap.ScaleControl({ 163 anchor : BMAP_ANCHOR_BOTTOM_LEFT 164 }); 165 scaleControl.setUnit(BMAP_UNIT_IMPERIAL); 166 map.addControl(scaleControl); 167 var navControl = new BMap.NavigationControl({ 168 anchor : BMAP_ANCHOR_TOP_LEFT, 169 type : BMAP_NAVIGATION_CONTROL_LARGE 170 }); 171 map.addControl(navControl); 172 var overviewControl = new BMap.OverviewMapControl({ 173 anchor : BMAP_ANCHOR_BOTTOM_RIGHT, 174 isOpen : true 175 }); 176 map.addControl(overviewControl); 177 } 178 var map; 179 // initMap(); 180 </script> 181 </html>
百度地图api根据地图缩放等级显示不同的marker点相关推荐
- 百度地图api根据地图缩放等级显示不同的marker点,功能二
功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 1 <%@ page language="java" contentType= ...
- php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
- python + 高德地图API实现地图找房
python + 高德地图API实现地图找房 项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
- 高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息 通过 高德地图 JS Web 添加自定义图标,自定义窗口标记 已经能在地图中正常添加自定义标记了 这篇文章讲讲点击标记时,如何 ...
- Android中应用百度地图API开发地图APP实例-显示百度地图
场景 效果 在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY http://lbsyun.baidu.com/index.php 申请API_KEY 登录百度开放平台后找到控制台下 ...
- android应用控制百度地图,Android中应用百度地图API开发地图APP实例-显示百度地图...
场景 效果 在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY 申请API_KEY 登录百度开放平台后找到控制台下的应用管理-创建应用 依次输入应用名,应用类型选择Android S ...
- 百度地图API实现地图应用
企业官网上需要用到地图应用,这里对百度地图API的使用做点笔记,好记性不如烂笔头. 实现地图应用的流程如下: 1.获取密钥:教程网址 https://jingyan.baidu.com/article ...
- 使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...
- 调用百度地图api实现地图查询功能
百度地图api功能强大,进入百度地图api平台之后首先需要注册申请一个ak码(其实就是权限码),通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了. 在这里提供两个本人写好的地图查询功能 ...
最新文章
- AI学术大地震---YOLO之父退出CV界,以此来反对AI算法用于军事和隐私窥探
- SAP QM Batch to Batch的转移过账事务中的Vendor Batch
- Mysql 8二进制包多实例绿色解压安装Windows配置
- 测试电视是不是4k的软件,怎么判断4K电视真假?教你快速检测的方法!
- iOS GorupBy
- 前端学习(1961)vue之电商管理系统电商系统之调用api获取数据
- 《Programming WPF》学习(一)Hello WPF
- python删除长目录_python中删除目录名两端
- 多元线性模型分类变量方差_第三十一讲 R多元线性回归中的多重共线性和方差膨胀因子...
- 工具记录,使用jarsigner 对APK进行签名
- RHEL5.0 搭建DNS服务器
- JavaScript-ECMAScript、BOM、DOM
- 【原创】新韭菜日记20---在国内股市亏钱的最大原因就是杠杆和割肉
- PS制作个人LOGO技术总结
- python中的函数及面向对象的知识点
- 以计算机写一篇作文500字,描写计算机的作文
- Unity3D游戏开发初探
- 设计模式(Java随笔)—备忘录模式
- JAVA毕业设计健身房管理系统设计计算机源码+lw文档+系统+调试部署+数据库
- Verilog数字系统设计——4 选1 多路选择器
热门文章
- “为了交项目干杯”对“那周余嘉熊掌将得队”、“男上加男,强人所男”的Beta产品测试报告...
- 学习Java应该关注哪些网站?
- Python实现截图?一文带你入门
- 第五章 多变量线性回归
- 2017多校第4场 HDU 6078 Wavel Sequence DP
- 华为手机8.0.0怎么找到云相册_华为手机里的相册照片删除了怎么找回?
- TXLINE 这个软件 计算 微带线的宽度
- 射频板PCB设计--微带线
- google计费接入,Billing结算库支付
- 使用Rancher的RKE部署Kubernetes要点