百度地图API详解之地图初始化

从今天开始我会陆续写一些有关百度地图API开发的文章,每篇文章会针对API的某个功能进行详细的讲述。本文将介绍有关地图初始化部分的内容(本系列文章将使用最新版本的API)。

地图初始化是开发地图应用的第一步,只有初始化完成后才能开始其他功能的开发。否则地图将不能正常工作。

首先,我们要准备一个HTML容器用来显示地图,这里选用一个div元素,同时设置好宽度和高度。代码如下:

1
<div id="container" style="width:600px;height:400px;"></div>

我们需要创建一个Map类的实例,你可以认为一个实例就对应着一个地图,如果你的页面需要展示多个不同的地图,那么就需要创建多个Map类的实例。创建Map类实例的代码如下:

1
var map = new BMap.Map('container');

在构造函数里,我们传入容器元素的id,当然也可以是元素本身,告诉API我希望在哪个地方展示地图。注意,到这里地图初始化工作并没有完成,此时如果查看页面,则会发现元素中除了有个灰色背景外什么也没有。

c1579bef548c974bfcfa3ce2

此时API只进行一部分的初始化工作,包括:给容器元素添加特定样式,创建内部的HTML元素、绑定DOM事件,如果通过firebug等调试工具会发现你提供的div容器里面已经不再是空的了。

66988fde2fcdda05cdbf1a5a

要想让容器里展示地图还需要给API提供两个东西:地理位置展示级别。地理位置就是告诉API显示哪里的地图,在北京还是在上海?还是在广州?地理位置是通过经纬度来描述的,百度地图也如此。展示级别告诉API以多大的比例显示地图。在初中地理课上学过,地图是有比例尺的,比例尺通常会告诉地图上一厘米代表实际多少公里。地图API也如此,但是它是以像素作为基准的,不同的级别下每个像素所代表的米数是不同的,级别越高每像素等于的米数就越少,反之则越大。视觉上看就是级别越高地图越详细。目前百度地图支持的级别范围是1到18,在18级下,地图上一个像素表示一米。

下面代码提供一个经纬度和一个级别,进行地图初始化:

1
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

东经116.404度,北纬39.915度大约是在天安门的位置,当然经纬度后面的位数越多越能精确的表示一个点,级别给11,现在会在浏览器看到这个效果:

833962df2731c04e4854030b

方法centerAndZoom接收到一个坐标和一个级别后就开始进行相应的计算,接着会根据计算结果获取相应的图块,最终显示在浏览器中。至此,地图初始化才全部完成。

如果你不知道北京的经纬度信息怎么办?1.2版本的API有个更方便的功能:通过城市名称进行地图初始化。

1
map.centerAndZoom('北京');

此时API会根据你提供城市名来查找其中心位置,并根据容器大小来决定级别,保证城市中心区域都能显示在视野中,假如我们不改变容器大小使用上述方式来初始化地图,你将得到和之前一致的结果,但如果你把容器宽高改为300x200,则会得到以下效果:

d4b65ed0cf509dd2a1ec9c26

我们看到中心没有变但是级别发生了变化,因为容器变小了,这是为了保证能够在视野范围内展示北京市中心区域。通过这种方式初始化地图的好处就是你不必知道经纬度、级别这些概念就能让API开始显示地图,API这么做也是最大限度降低开发者的使用成本。当然,任何事物都有两面性(仿佛是政治课的内容),这种方式初始化有两个问题:首先,初始化过程是异步的,你不能立刻在centerAndZoom代码之后获取地图状态(比如中心点、视野范围等),而需要通过监听地图load事件来进行后续的操作,第二,初始化过程会比前者稍慢,因为此时会有网络请求,请求返回之后才能确定地图中心和级别。

比如你只能通过如下方式获取地图中心点:

1
2
3
4
map.addEventListener('load', function(){
    alert(map.getCenter().lng + ', ' + map.getCenter().lat);
});
map.centerAndZoom('上海');

Map类提供了isLoaded方法,通过它就能知道地图是否加载完成,我们可以来看看在两种不同的初始化方式中调用此方法的结果如何:

1
2
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
alert(map.isLoaded()); // true

如果用城市名这种方式,你会发现centerAndZoom方法执行完成后地图并没有初始化完成:

1
2
map.centerAndZoom('上海');
alert(map.isLoaded()); // false
展开阅读全文

[百度分享]详解百度地图API地图标注

09-30

本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节。rnrn标注概述rnrn标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息。比如你在西单商场位置添加了一个标注,不论地图移动、缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置.rn[img=http://images.51cto.com/files/uploadimg/20110916/1040051.jpg][/img]rn从上面的图可以看出,不论地图如何变化标注始终指向“西单商场”的位置。rnrn如何知道某个点的坐标?rnrn上例中我们在西单商场位置添加了一个标注,那么我是如何知道它的坐标点呢?可以通过API的事件机制来获取:rnrnmap.addEventListener('click', function(e) rnconsole.log(e.point); rn); rnrn我们在map对象上添加了一个click事件的监听函数,当点击地图上某个位置时,监听函数通过控制台把当前点击的位置输出出来(注意需要有控制台的支持,比如firebug,如果没有控制台则可使用alert把point的lng和lat属性输出出来)。此外,你也可以使用API提供的坐标拾取工具来完成(http://dev.baidu.com/wiki/static/map/API/tool/getPoint/),它支持检索并且点击地图上任意位置时会出现该位置的坐标。rnrn标注元素组成rnrn从DOM元素构成角度看,一个完整的标注是由以下几个部分组成的:rnrn标注点击区域rnrn标注图标rnrn标注阴影rnrn下面是示意图:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040052.jpg][/img]rn在地图API实现中,这三个DOM元素分别位于不同的容器中,这些容器可以通过map.getPanes()方法获得,其中markerMouseTarget就是标注点击区域所在容器、markerPane为标注图标所在容器,markerShadow为标注阴影所在图层。你可能会在自定义覆盖物时需要这些容器对象,这里只需要知道Marker的各个部分是如何放置的即可。rnrn自定义标注图标rnrn标注的图标是可以自定义的,通过Icon类可以自定义标注的图标,比如我希望使用下面这个图片作为标注图标:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040053.png][/img]rn已知这个图标大小为20x32。我们初始化地图,接着定义Icon,并赋给一个Marker实例:rnrnvarmap =newBMap.Map('container'); rnmap.centerAndZoom(newBMap.Point(116.380797, 39.918497), 18); rnvar icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), rnanchor: new BMap.Size(10, 30) rn);varmkr =newBMap.Marker(newBMap.Point(116.38075,39.918986), rnicon: icon rn); rnmap.addOverlay(mkr); rnrn我们给定icon所需图片的url,接着是图片的尺寸,另外我们还增加了anchor属性,这个是干什么用的呢?在自定义标注图标时有一点需要注意的就是标注的定位点(anchor),通俗的讲就是要指定图片的哪个位置是与标注真正的位置对应在一起。我们通过下面的图示来说明:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040054.png][/img]rn我们获取到地图上一个位置(上图中标注下端所在的黑色小方块),那么我也希望我标注中间下端指向这个位置,这个就需要通过anchor来调节。anchor的意义如下图所示:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040055.png][/img]rn即定位点距离图片左上角的偏移量。rnrn如果不给anchor的话,API会自动获取图片中心点作为anchor位置:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040056.png][/img]rn我们看到标注图片中心的位置覆盖在那个小方块区域。rnrn除了anchor之外,还有一个infoWindowAnchor属性,它是用来控制信息窗口开启的位置的(注意这里调用的是Marker的openInfoWindow方法,而不是Map的openInfoWindow方法),默认情况下它和icon的anchor是一个位置:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040057.png][/img]rn标注被InfoWindow的底角挡住了,通过infoWindowAnchor属性就可以改变开启位置:rnrnvaricon =newBMap.Icon('pin.png', newBMap.Size(20, 32), rnanchor: newBMap.Size(10, 30), rninfoWindowAnchor: newBMap.Size(10, 0) rn) rn再看看效果:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040058.png][/img]rn标注拖拽rnrn标注支持拖拽,并且可以配置是否有动画效果,我们修改创建标注的代码:rnrnvarmkr =newBMap.Marker(newBMap.Point(116.38075,39.918986), rnicon: icon, rnenableDragging: true, rnraiseOnDrag: true); rn这里开启了拖拽功能以及响应的动画效果。如果此时拖拽地图你会得到如下效果:rn[img=http://images.51cto.com/files/uploadimg/20110916/1040059.png][/img]rn通过监听标注的dragend事件,你可以知道拖拽结束后标注的地理位置:rnrnmkr.addEventListener('dragend', function(e) rnalert(e.point.lng +', '+e.point.lat); rn) rn标注阴影rnrn为了增加立体感,可以单独给标注添加阴影,当然你也可以把阴影直接画在icon所用的图片上,但是由于阴影和标注本身在一起,所以就不建议使用任何动画效果,否则会缺乏真实感。阴影可以通过MarkerOptions的shadow属性配置,类型也是一个Icon实例。具体使用方法和icon属性一样,这里就不赘述了。rnrn原文链接:http://www.cnblogs.com/jz1108/archive/2011/09/15/2152122.html 论坛

[百度分享]详解百度地图API地图操作

10-12

首先我们来看看百度地图API都提供了哪些操作方式:rnrnPC平台:rnrn鼠标拖拽移动rnrn鼠标双击缩放rnrn鼠标滚轮缩放rnrn键盘控制rnrn移动平台:rnrn单指拖拽移动rnrn单指双击放大rnrn双指移动缩放rnrn默认情况下,地图支持鼠标拖拽以及双击缩放(双击鼠标左键放大一级,双击鼠标右键缩小一级)操作。如果需要开启鼠标滚轮支持需要调用这个接口:rnrnmap.enableScrollWheelZoom(); // 启动鼠标滚轮操作 rn键盘控制默认也是不开启,开启后按键+和-分别让地图放大或缩小一级,PgUp、PgDn、Home、End键则会让地图向下、上、右、左四个方向移动一段距离。↑、↓、←、→四个健可以使地图在四个方向上移动,另外这个也可以组合使用,比如同时按住↑和←,地图就会往右下方移动,目的是让你看到左上方区域的图像。开启键盘操作需要调用如下接口:rnrnmap.enableKeyboard(); rn为了让用户获得更好的体验,建议开启连续缩放效果和惯性拖拽效果:rnrnmap.enableContinuousZoom(); // 开启连续缩放效果 rnmap.enableInertialDragging(); // 开启惯性拖拽效果 rn这样,地图缩放就会有一个动画效果,拖拽结束后地图还会根据移动距离和速度产生一个惯性效果。rnrn在移动端,所有的操作默认都是开启的,但是通过接口也可以进行配置。rnrn原文链接:http://www.cnblogs.com/jz1108/archive/2011/09/28/2194444.html 论坛

百度地图API,无法显示地图图层

03-18

刚刚开始学Android开发,想用百度地图API实现定位功能,按我的代码运行后只有定位的原点,看不到地图图层了,请问是我代码里漏了什么吗?多谢指点!!rnrn以下是代码:rn[code=java]package com.example.mymap;rnrnimport android.app.Activity;rnimport android.os.Bundle;rnimport android.util.Log;rnrnimport com.baidu.location.BDLocation;rnimport com.baidu.location.BDLocationListener;rnimport com.baidu.location.LocationClient;rnimport com.baidu.location.LocationClientOption;rnimport com.baidu.location.LocationClientOption.LocationMode;rnimport com.baidu.mapapi.BMapManager;rnimport com.baidu.mapapi.map.LocationData;rnimport com.baidu.mapapi.map.MapController;rnimport com.baidu.mapapi.map.MapView;rnimport com.baidu.mapapi.map.MyLocationOverlay;rnimport com.baidu.platform.comapi.basestruct.GeoPoint;rn rnpublic class MainActivity extends Activity rn rn BMapManager mBMapMan = null; rn MapView mMapView = null; rn rn public LocationData locData = new LocationData(); //储存我的位置rn public MyLocationOverlay myLocationOverlay = null;rn public LocationClient mLocationClient = null;rn public MyLocationListener myListener;rn rn @Override rn public void onCreate(Bundle savedInstanceState) rn super.onCreate(savedInstanceState); rn mBMapMan=new BMapManager(getApplication()); rn mBMapMan.init("FLC1HRWRaEvpIsmeZ471wF22", null); rn //注意:请在试用setContentView前初始化BMapManager对象,否则会报错 rn setContentView(R.layout.activity_main); rn mMapView=(MapView)findViewById(R.id.bmapsView); rn mMapView.setBuiltInZoomControls(true); rn //设置启用内置的缩放控件 rn MapController mMapController=mMapView.getController(); rn // 得到mMapView的控制权,可以用它控制和驱动平移和缩放 rn GeoPoint point =new GeoPoint((int)(39.915* 1E6),(int)(116.404* 1E6)); rn //用给定的经纬度构造一个GeoPoint,单位是微度 (度 * 1E6) rn mMapController.setCenter(point);//设置地图中心点 rn mMapController.setZoom(12);//设置地图zoom级别rn rn //实现定位rn myListener = new MyLocationListener();rn mLocationClient = new LocationClient(getApplicationContext()); //声明LocationClient类rn mLocationClient.registerLocationListener( myListener ); //注册监听函数rn rn LocationClientOption option = new LocationClientOption(); //设置定位参数rn option.setOpenGps(true); //打开GPRSrn option.setLocationMode(LocationMode.Hight_Accuracy);//设置定位模式rn option.setCoorType("bd09ll");//返回的定位结果是百度经纬度,默认值gcj02rn option.setScanSpan(5000);//设置发起定位请求的间隔时间为5000msrn option.setIsNeedAddress(true);//返回的定位结果包含地址信息rn option.setNeedDeviceDirect(true);//返回的定位结果包含手机机头的方向rn mLocationClient.setLocOption(option);rn rn //请求定位rn mLocationClient.requestLocation();rn rn myLocationOverlay = new MyLocationOverlay(mMapView);rn rn myLocationOverlay.setData(locData); rn mMapView.getOverlays().add(myLocationOverlay); rn mMapView.refresh(); rn mMapView.getController().animateTo(new GeoPoint((int)(locData.latitude*1e6), rn (int)(locData.longitude* 1e6)));rn rn rn rn rn public class MyLocationListener implements BDLocationListener rn rn @Overridern public void onReceiveLocation(BDLocation location) rn // TODO Auto-generated method stubrn if (location == null) rn Log.v("locData", "null");rn return;rn rn rn locData.latitude = location.getLatitude();rn locData.longitude = location.getLongitude();rn locData.direction = 2.0f;rn locData.accuracy = location.getRadius();rn locData.direction = location.getDerect();rn //myLocationOverlay.setData(locData);rn //mMapView.getOverlays().add(myLocationOverlay);rn /*Log.v("locData","onReceiveLocation"+ locData.latitude+" "+locData.longitude);rn mMapView.getController().animateTo(new GeoPoint((int)(locData.latitude*1e6), rn (int)(locData.longitude* 1e6)));rn mMapView.refresh(); */rn rn rn rn @Overridern public void onReceivePoi(BDLocation arg0) rn // TODO Auto-generated method stubrn if(arg0==null)rn return;rn rn rn rn rn @Override rn protected void onDestroy() rn mMapView.destroy(); rn if(mBMapMan!=null) rn mBMapMan.destroy(); rn mBMapMan=null; rn rn super.onDestroy(); rn rn @Override rn protected void onPause() rn mMapView.onPause(); rn if(mBMapMan!=null) rn mBMapMan.stop(); rn rn super.onPause(); rn rn @Override rn protected void onResume() rn mMapView.onResume(); rn if(mBMapMan!=null) rn mBMapMan.start(); rn rn super.onResume(); rn rn rn rn [/code]rnrn 论坛

没有更多推荐了,返回首页