web搞得地图组件库的使用

项目需求:(1)需要向用户展示学而思线下教学点的信息,用户通过切换城市可以查看不同城市的线下教学点信息,所以每次切换城市时需要重新初始化地图,以选中城市的经纬度设置地图的中心点;(2)点击地图时,以当前点击点为中心,展示可视区域的教学点信息;规划路线—通过输入初始地址起点和结束点,规划路线;;;----路由组件(封装为业务组件不合理)

实现过程:

一、初始化地图: 1.initMap方法:设置地图版本,配置需要的插件(placeSearch,AMap.Geocoder为逆向地理编码插件,规划路线插件);通过new Map构造函数初始化地图数据:(是否为3D地图;zoom地图初始化缩放比例,以及地图初始中心经纬度)

二、实现功能:

(1)城市默认北京,我们在初始地图时需要将地图中心经纬度设置为北京的经纬度,然后地图以北京为中心,然后设置placeSearch搜索地址名为学而思,地图将显示学而思在北京的线下教学点;

(2)城市切换:调用placeSearch插件,其中有一个city属性,我们可以选择城市将值赋给city,然后调用地图初始化方法;

(3)点击地图:获取地图的地理编码,然后调用逆地理编码插件,显示点击点的地址信息(不仅学而思线下教学点icon可以点击,地图上任何地点都可以点击,而且点击后默认地图中心在点击位置)

(4)调用路线规划的插件,输入起始地址规划路线