百度三维地图体验(坑爹啊有图有真相)

2011-10-11 11:03 PHP淮北阅读(14090) 评论(10) 编辑收藏举报

前言：

最近工作比较少，看到百度有个团购地图的东西，于是对百度地图感兴趣，自己体验一下百度地图，这个体验真是有点坑爹！

正文：

想法：

百度地图api有很多实例，看到有个3D地图的例子很感兴趣，

个人博客里面有谷歌地图来显示游客地图位置的功能（文章：打造属于自己的谷歌地图版博客公告【演示+源码】），如果换成百度地图，显示3D地图岂不是更好。想到做到，这个设计思路：

获得游客地理信息--使用新浪ip接口：http://www.cnblogs.com/phphuaibei/archive/2011/09/08/2171903.html
地理解析---百度实例http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&7_29#7&29
显示3D地图---百度实例http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&0_3#0&3

第一个已经有了，主要是整合第二个和第三个，整合代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区上地10街", function(point){
  if (point) {
    map.setCurrentCity("北京");  
    map.centerAndZoom(point, 19);
    map.addOverlay(new BMap.Marker(point));
	map.enableScrollWheelZoom(true);
  }
}, "北京市");

</script>

看一下效果图：