百度地图API使用Example I

来源:互联网 发布:守卫剑阁降龙伏虎数据 编辑:程序博客网 时间:2024/05/27 00:47

百度地图API使用Example I

百度地图给我们提供很nice的API,我们在实际项目中可以调用这些API完成很多跟位置相关的操作。
这篇博客将介绍如何使用API进行定位,标注,绘图等功能。文章最后将给出完整源码。
首先是定位功能:
先上结果图:
这里百度地图提供了几个方法。
LocalCity:此类用于获取用户所在的城市位置信息。(根据用户 IP 自动定位到城市) 
构造函数描述 LocalCity([opts:LocalCityOptions]) 创建一个获取本地城市位置的实例

方法返回值描述get(callback:Function)none当获取城市信息后,回调函数会被调用,其参数为类型为LocalCityResult 对象。
       
使用如下代码即可实现ip定位功能:
    //根据ip定位    var myCity = new BMap.LocalCity();    var point = myCity.get(myFun);    function myFun(result) {        var cityName = result.name;        alert('您所在的位置是:' + cityName);    }

当然,我们定位后总得在地图上显示出来。这样就需要根据得到的城市在地图上显示出来。
这时我们需要Geocoder类。
Geocoder:用于获取用户的地址解析
构造函数描述 Geocoder()创建一个地址解析器的实例
方法返回值描述getPoint(address:String, 
callback:Function, city:String)
none对指定的地址进行解析。如果地址定位成功,则以地址所在的坐标点 Point 为参数调用回调函数。
否则,回调函数的参数为 null。city 为地址所在的城市名,例如“北京市”。。
                             
这样我们使用Geocoder的getPoint方法,我们给定一个地址address,就可以得到坐标点Point。使用map.centerAndZoom(point, 8)即可以将Point显示到地图上了。
然后我们再使用一个Mark在地图上将Point给标出来。
效果是:
代码是:
    //根据给定的城市名定位并标注    function getLocationandMark2(city) {        var mygeo = new BMap.Geocoder();        mygeo.getPoint(city, function (point) {            var marker = new BMap.Marker(point);//基于定位的这个点的点位创建marker</span>            map.addOverlay(marker);//将marker作为覆盖物添加到map地图上</span>            map.centerAndZoom(point, 9);        });    }

到现在就可以直观的显示要定位的点了,但是我们希望能够让被标注的地点能够在地图上告诉我们它是当前定位点(如果有多个mark的话)。
这里我们使用一个信息窗口进行显示。
效果是:
代码是:
    //添加信息窗口    var opts = {        width: 200,     // 信息窗口宽度          height: 70,     // 信息窗口高度          title: "您好,我是白熊花田"  // 信息窗口标题      }    //根据给定的城市名定位并标注    function getLocationandMark2(city) {        var mygeo = new BMap.Geocoder();        mygeo.getPoint(city, function (point) {            var marker = new BMap.Marker(point);//基于定位的这个点的点位创建marker</span>            map.addOverlay(marker);//将marker作为覆盖物添加到map地图上</span>            map.centerAndZoom(point, 9);            var infoWindow = new BMap.InfoWindow("您当前所在的位置是" + city + "哦", opts);  // 创建信息窗口对象              map.openInfoWindow(infoWindow, point);        });    }
      百度地图API学习和下载:http://developer.baidu.com/map/
    源码下载:http://download.csdn.net/detail/whiterbear/7584709


0 0
原创粉丝点击