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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容