用JavaScript调用百度地图API在地图显示的左下角显示不随地图变化的图例

雨中的路- 2017-05-12 05:17:41
请大神给点思路,在网上没百度到类似的,我是在别人的代码上面改,求给思路,谢谢!!!!
...全文
261 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
Msxindl_Com 2017-05-12
  • 打赏
  • 举报
回复
一个例子:

<html>
<head>
<meta charset="gb2312" />
<title>百度地图</title>
<script type="text/javascript">
function initMap(){
  createMap();
  setMapEvent();
  addMapControl();
}
function createMap(){ 
  map = new BMap.Map("map"); 
  map.centerAndZoom("成都",10);
}
function setMapEvent(){
  map.enableScrollWheelZoom();
  map.enableKeyboard();
  map.enableDragging();
  map.enableDoubleClickZoom()
}
function addMapControl(){
  var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:1});
  map.addControl(navControl);
}
var map;
function loadJScript(){
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859&callback=initMap";
	document.body.appendChild(script);
}
window.onload = loadJScript;
</script>
<style type="text/css">
#map{
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	background-color:white;
}
#logo{
	position:fixed;
	left:0;
	bottom:0;
	z-index:10;
	border:1px solid red;
}
</style>
</head>
<body>
<div id="map"></div>
<img id="logo" src="http://pic.baike.soso.com/p/20120228/20120228144539-1458223318.jpg" />
</body>
</html>
内容概要:本文是一段用于地理空间数据分析的Google Earth Engine(GEE)脚本代码,主要目的是对巴布亚新几内亚赫拉省(Hela Province)在2024年全年的降雨量进行可视化与统计分析。脚本首先加载并裁剪研究区域边界,随后调用CHIRPS每日降水数据集,计算全年累计降水量,并以彩色渐变图层形式展示总降雨分布。同时,脚本按月聚合降水数据,生成区域内平均月降雨量的时间序列柱状图,并将图表嵌入地图界面右下角。此外,还自定义添加了左下角图例,提升可视化可读性,并支持将结果影像导出至Google Drive。; 适合人群:具备基础遥感与地理信息系统(GIS)知识,熟悉GEE平台操作的科研人员或环境数据分析从业者;有一定JavaScript编程经验的学习者。; 使用场景及目标:①实现区域气候数据的空间可视化;②开展长时间序列降水变化分析;③生成科研报告或决策支持所需的图表与地图产品;④学习GEE中图像集合处理、区域统计、图表绘制与UI组件集成方法。; 阅读建议:此资源以实际代码案例为核心,建议结合GEE开发环境边运行边理解,重点关注数据筛选、reduceRegion应用、时间序列处理逻辑及可视化参数设置,便于掌握从数据处理到成果输出的完整流程。

87,994

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧