百度地图 开发文档 :http://lbsyun.baidu.com/index.php?title=jspopular
调用接口
需要 内置加载一个 百度api文件 使用自己的ak 申请一个
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********************"></script>
因为呢有些东西 是外置的 npm里面是没有 那么这些api接口里面,要想使用
你就的去加载引入对方指定的 api接口
一般没有封装那就是 设置id显示位置
// 创建Map实例 // 初始化地图 //添加控件、遮罩、悬浮定点图标 |
学的是技巧 粘贴的是情怀
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
requestList= ()=>{ axios.ajax({ url:'/adminapi/map/bike_list', data:{ params:{ } } }).then((res)=>{ let result = res.data.result; this.setState({ list:result }) let bike_list = result.bike_list; let route_list = result.route_list; let service_list = result.service_list; // 载入初始化 this.renderMap(); // 等待自行车的 位置坐标 this.bikeGps(bike_list); // 可以监听服务区域 超出就不归我管了 this.drawServiceList(service_list); // 自行车 服务,起点到终点的 this.gpsGps(route_list); }) }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 创建地图 对象 找到显示的位置 id盒子 renderMap= ()=>{ this.map = new window.BMap.Map('BikeDetailMap'); this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 this.addMapControl(); //添加控件 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 添加地图控件 默认操作 写入这可就可以添加控件操作了 addMapControl = ()=>{ let map = this.map; map.addControl(new window.BMap.ScaleControl({ anchor:window.BMAP_ANCHOR_TOP_RIGHT})); map.addControl(new window.BMap.NavigationControl({ anchor:window.BMAP_ANCHOR_TOP_RIGHT })); }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 绘制行驶区域 drawServiceList = (list)=>{ let serverList = []; list.forEach((item)=>{ serverList.push(new window.BMap.Point(item.lon,item.lat)); }) // 创建多边形 let polygon = new window.BMap.Polygon(serverList, { strokeColor:"blue", strokeWeight:2, strokeOpacity:0.6 }); this.map.addOverlay(polygon); }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 添加 动作 this.map.addOverlay(startMarker); this.map.addOverlay(endMarker); this.map.addOverlay(poliLine); // 打开初始化地图 显示的中心点 this.map.centerAndZoom(endPoint,11); }