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

最新推荐文章于 2021-03-17 07:53:56 发布

zcy88759

最新推荐文章于 2021-03-17 07:53:56 发布

阅读量6k

点赞数

分类专栏： google maps 文章标签：百度 api 图形 xmlhttprequest javascript function

google maps 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

引言

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

一、设计思路

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

二、编写地图显示页面

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

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

[xhtml] view plain copy print ?

<!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>
<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>

<!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>

<mce:style type="text/css"></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建立一张地图，各函数的使用官网上都有详细示例代码。

[xhtml] view plain copy print ?

<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]);
}
}

for (x in citys)
         {
			getWeatherByName(citys[x]);
         }
    
    }

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

[javascript] view plain copy print ?

//根据城市名称得到天气信息
function getWeatherByName(cityname){
/************************创建XMLHttpRequest对象实例代码*******************************/
//创建一个布尔型变量，用来检查是否为有效的IE实例。
var xmlhttp = false;
//检查是否使用的是IE
try{
//如果JavaScript的版本大于5
xmlhttp = 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);
}

//根据城市名称得到天气信息
	function getWeatherByName(cityname){
			
/************************创建XMLHttpRequest对象实例代码*******************************/

//创建一个布尔型变量，用来检查是否为有效的IE实例。

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函数实现，该函数的两个输入参数就是城市名称和该城市的天气信息。

[javascript] view plain copy print ?

//根据城市名称搜索,并显示天气信息窗口：
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();//创建和初始化地图