H5+百度地图小结

因项目需要接入百度地图API，在网页上实现搜索任意地点和目的地周边的配套详情

步骤详情：

1、在WebStorm上新建项目

2、要使用百度地图的API，则需要用百度开发者账号创建应用，并取得应用的ak玛，创建应用类型时应创建浏览器端（服务端不在通用）

图1-ak标示

3、获取百度地图搜索API

```

// 百度地图API功能

var map =new BMap.Map("indexmap");// 创建Map实例

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

var top_left_control =new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

var top_left_navigation =new BMap.NavigationControl();//左上角，添加默认缩放平移控件

var top_right_navigation =new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL});//右上角，仅包含平移和缩放按钮

/*缩放控件type有四种类型:

BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

map.addControl(top_left_control);

map.addControl(top_left_navigation);

map.addControl(top_right_navigation);

var local =new BMap.LocalSearch(map, {

renderOptions:{map:map,autoViewport:true,panel:"r-result"}

});

local.searchNearby("餐饮","太阳宫");

/**

* 获取输入框内容

*/

function searchText() {

return document.getElementById("input1").value;

}

```

4、引用bootstrap创建样式，在html里集成bootstrap

图2-bootstrap集成

5、参考bootstrap搭建界面

图3-demo