【实践】基于百度地图API实现的地图形式天气预报【一】

引言

前几天在博客园上看到有人写了篇关于百度地图API的使用介绍，因为先前也了解过google地图API，但当时也只是感兴趣的了解下，况且当时使用API还要申请key获得使用权限（现在不需要了），并未实际动手实践一下。今天看到这篇文章之后，去百度地图API官网看了下，介绍挺详细的，况且还有很多详细示例，顿时吸引住了我这刚入门web开发的小菜鸟，况且API使用也不要去申请key，有了动手实际运用的想法，经过这两天的捣腾算是完成了这个地图形式的天气预报，当然还存在一些小问题待解决，先在此做个小结。

一、设计思路

利用百度地图API建立一张地图，展现中国全貌的地图，在利用地图API提供的本地搜索功能，根据提供的城市名称搜索所处位置并在地图上进行标记，再在各城市标记点上设计弹出窗口来显示天气信息。天气信息的获取则是通过php脚本直接对百度的各城市天气搜索页面进行天气信息的抓取。最终效果图

二、编写地图显示页面

首先当然要编写最基础的代码，引入百度地图API和设计好页面样式，百度地图API官网上有开发的最简单示例百度地图的“Hello, World”

我对地图显示页面也是进行很简单设计就是一个标题和一个地图显示区块。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<mce:style type="text/css"><!--html,body{margin:0 auto;padding:0;background:url("./images/bg.gif") repeat-x scroll 0 0 #F8FAFC;}.top{color:#0066FF;height:53px;margin:0px auto;padding:0;width:980px;}.topContent{background:none repeat scroll 0 0 #F5F9FC;margin-top:10px;text-align:center;height:32px;width:980px;font-weight:blod;font-size:20px;}.dituContent{width:980px;height:530px;border:#ccc solid 1px;margin:0 auto;padding:0;}
--></mce:style><style type="text/css" mce_bogus="1">    html,body{margin:0 auto;padding:0;background:url("./images/bg.gif") repeat-x scroll 0 0 #F8FAFC;}.top{color:#0066FF;height:53px;margin:0px auto;padding:0;width:980px;}.topContent{background:none repeat scroll 0 0 #F5F9FC;margin-top:10px;text-align:center;height:32px;width:980px;font-weight:blod;font-size:20px;}.dituContent{width:980px;height:530px;border:#ccc solid 1px;margin:0 auto;padding:0;}</style>
<mce:script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true" mce_src="http://api.map.baidu.com/api?v=1.1&services=true"></mce:script>
</head><body>
<div class="top"><div class="topContent">地图形式天气预报</div>
</div><!--百度地图容器--><div class="dituContent" id="dituContent"></div></body>
</html>

接着在</body></html>中间编写js代码，利用地图API建立一张地图，各函数的使用官网上都有详细示例代码。

<script type="text/javascript">//创建和初始化地图函数：function initMap(){createMap();//创建地图setMapEvent();//设置地图事件searchPoint();//搜索地点}//创建地图函数：function createMap(){var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图var point = new BMap.Point(108.953098,34.2778);//定义一个中心点坐标map.centerAndZoom(point,5);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = map;//将map变量存储在全局}//地图事件设置函数：function setMapEvent(){map.enableDragging();//启用地图拖拽事件，默认启用(可不写)//  map.enableScrollWheelZoom();//启用地图滚轮放大缩小//   map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map.disableDoubleClickZoom();//map.enableKeyboard();//启用键盘上下左右键移动地图}//地图点搜索函数：function searchPoint(){var citys=new Array("北京","上海","天津","重庆","哈尔滨","长春","沈阳","呼和浩特","石家庄","郑州","济南","太原","南京","合肥","西安","银川","兰州","西宁","武汉","长沙","杭州","南昌","福州","贵阳","成都","广州","南宁","昆明","海口","乌鲁木齐","拉萨","台北","香港","澳门");for (x in citys){getWeatherByName(citys[x]);}}

再接着就是实现根据城市名称获取该城市的天气信息，及在地图上标记处各城市并显示天气信息窗口，获取城市天气信息是通过getWeatherByName函数代码：

//根据城市名称得到天气信息function getWeatherByName(cityname){/************************创建XMLHttpRequest对象实例代码*******************************///创建一个布尔型变量，用来检查是否为有效的IE实例。var xmlhttp = false;
//检查是否使用的是IE
try{//如果JavaScript的版本大于5xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {//如果不是，则使用老版本的Active X 对象try{//如果使用的是IE浏览器xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}catch (E) {//否则肯定使用的是非IE浏览器xmlhttp = false;}
}
//如果使用的是非IE浏览器，则创建一个该对象的JavaScript实例
if (!xmlhttp && typeof XMLHttpRequest != "undefinded")
{xmlhttp = new XMLHttpRequest();
}
/**********************************************************************************/var serverPage = "weather/weather.php?a="+cityname+"&tmp="+Math.random();xmlhttp.open("GET",encodeURI(serverPage));xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200){searchPointByName(cityname,xmlhttp.responseText);}}xmlhttp.send(null);
}

该函数主要实现通过ajax技术在后台向服务端天气信息抓取脚本提交城市名称，已获得该城市的天气信息。在服务端成功返回该城市的天气信息之后再就是在地图上标记处该城市并显示天气信息窗口，该过程是通过searchPointByName函数实现，该函数的两个输入参数就是城市名称和该城市的天气信息。

//根据城市名称搜索,并显示天气信息窗口：function searchPointByName(cityname,content){var options = {onSearchComplete: function(results){if (local.getStatus() == BMAP_STATUS_SUCCESS){// 判断状态是否正确var markerPoint=results.getPoi(0).point;//得到标注点坐标var marker = new BMap.Marker(markerPoint);        // 创建标注map.addOverlay(marker);                          // 将标注添加到地图中var opts = {width : 400,     // 信息窗口宽度height: 160,     // 信息窗口高度title : cityname  // 信息窗口标题}var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象,content为显示天气信息的html语句marker.addEventListener("click", function(){                                        this.openInfoWindow(infoWindow);        });}}};var local = new BMap.LocalSearch(map, options);local.enableFirstResultSelection();local.search(cityname);}initMap();//创建和初始化地图

这样前端的地图显示页面就编写完成，后面主要就是服务端天气信息获取脚本的编写，这样通过城市名称从网上获取该城市的天气信息。

转载于:https://www.cnblogs.com/ljhero/archive/2011/02/25/1964984.html

【实践】基于百度地图API实现的地图形式天气预报【一】相关推荐

HTML调用百度地图API，实现地图标注位置
HTML调用百度地图API,实现地图标注位置一.说明二.代码总结提示:以下是本篇文章正文内容,下面案例可供参考一.说明通过HTML调用百度地图API,在指定位置显示出地图,并且在目标位置标 ...
python 实现对地图的点击_利用python和百度地图API实现数据地图标注的方法
如题,先上效果图: 主要分为两大步骤使用python语句,通过百度地图API,对已知的地名抓取经纬度使用百度地图API官网的html例程,修改数据部分,实现呈现效果一.使用python语句,通过 ...
基于百度图像识别api的游戏（coc）辅助工具分析
基于百度图像识别api的游戏(coc)辅助工具分析 (本代码仅供参考学习使用) 去年国庆放假,没事干,刚学了python 于是就找了这个小项目来练练手总体来说难度不大内容也不多几百行搞定 (删 ...
使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
基于百度音乐Api的Android高仿音乐播放App可在线试听下载歌词浏览
基于百度音乐Api的Android高仿音乐播放App可在线试听下载歌词浏览首先这也是学习过程中开发的一个练手项目,基于百度音乐Api,api在网上搜的,如果想看他的实现,可以下载我的项目来参考.风格 ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
基于百度翻译API的node插件
基于百度翻译API的node插件背景做过国际化的项目就明白要把每处的文案翻译成不同的语言版本,如果只是一点点,自己去百度上翻译成对应语言版本,copy过来就ok了,但是如果这个项目文案特别多的话, ...
android百度地图例子,使用百度地图API进行Android地图应用开发（Eclipse）(示例代码)...
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
python调用百度地图实现导航pc_利用python和百度地图API实现数据地图标注
如题,先上效果图: 主要分为两大步骤使用python语句,通过百度地图API,对已知的地名抓取经纬度使用百度地图API官网的html例程,修改数据部分,实现呈现效果一.使用python语句,通过百 ...

【实践】基于百度地图API实现的地图形式天气预报【一】

【实践】基于百度地图API实现的地图形式天气预报【一】相关推荐

最新文章

热门文章