手机端html5调用百度地图

百度地图ａｐｉ

类参考

官方示例库

自己用到的api

创建地图实例

var map = new BMap.Map("allmap");
allmap 是id为allmap的地图容器元素。

地图上的点

Point: 此类表示一个地理坐标点。

构造函数 描述
Point(lng: Number, lat: Number) 以指定的经度和纬度创建一个地理点坐标

解析地图

Geocoder:创建一个地址解析器的实例

myGeo.getPoint :可以根据地址获取坐标点。
myGeo.getLocation :可以根据坐标点获取地址。

地图上指定地点居中缩放

如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

搜索检索

LocalSearch:用于位置检索、周边检索和范围检索。

LocalSearchOptions: 是一个对象，是LocalSearch的可选参数
有一个参数：renderOptions，这个项没有填写的话，检索的内容就不显示。

使用构造函数新建新建一个LocalSearch的实例后，就可以调用实例search方法来检索地址了。
我做的时候，可以获取到一组地点。拿到数组里的第一个地点后，可以使用centerAndZoom(center: Point, zoom: Number) 来居中显示这个地点。

    //      这个不要用，经常变  vr wr qr 等等 -》      var tempFirstPoint = res.vr[0].point;
        //   一定要用这个来获取  第一个点， 要不然会出错
                            var tempPoint = res.getPoi(0).point;
            var opts = {
              position: tempFirstPoint,    // 指定文本标注所在的地理位置
              offset: new BMap.Size(-60, -60)    //设置文本偏移量
            }
            var label = new BMap.Label("地址：" +res.vr[0].address,
              opts);  // 创建文本标注对象
            label.setStyle({
              color: "#171717",
              fontSize: "14px",
              height: "20px",
              lineHeight: "20px",
              fontFamily: "微软雅黑"
            });
            map.addOverlay(label);
            // 设置标注
            var marker = new BMap.Marker(tempFirstPoint);// 创建标注
            map.addOverlay(marker);
            map.centerAndZoom(tempFirstPoint, 16);// 百度地图点居中现实

//网页，结果

res 是LocalSearch的实例调用search方法的返回值。上面的代码，写在LocalSearch的构造函数时，LocalSearchOptions中的键为onSearchComplete的回掉函数中。
显示效果

百度地图事件监听：

百度地图中的label,maker,circle等都提供了addEventListener(event: String, handler: Function)(填加时间监听函数)。百度地图整个地图也可以有监听事件。