前端实现街道地图_webgis前端地图功能展示

技术亮点

使用百度api实现了主要的地图功能

将地图DIV与游记功能结合

在API 尚不支持多个目的地的驾车导航的情况下自定义多个途经点的导航。

开发框架

Bootstrap词条

直接使用VScode中Bootstrap的扩展

实现功能

地图显示

在百度api中地图显示只需引入api后，创建地图容器和实例

var map = new BMap.Map("container");

//设置默认城市

map.setCurrentCity("广州");

//设置默认点坐标(小蛮腰)，初始级别为15

var point = new BMap.Point(113.331084,23.112223);

map.centerAndZoom(point, 15);

//插入地图控件：缩放、比例尺、地图类型、缩略图

map.addControl(new BMap.NavigationControl()); //平移缩放

map.addControl(new BMap.ScaleControl()); //比例尺

map.addControl(new BMap.OverviewMapControl()); //缩略图

map.enableScrollWheelZoom(true);//开启滚轮。

本地搜索

BMap.LocalSearch 提供本地搜索服务，在使用本地搜索时需要为其设置一个检索区域，检索区域可以是BMap.M