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

来源：互联网发布：新加坡俊知集团编辑：程序博客网时间：2024/05/20 04:27

引言

前几天在博客园上看到有人写了篇关于百度地图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><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建立一张地图，各函数的使用官网上都有详细示例代码。

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

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

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