2. Functional Description
①Find bikes available nearby
In this function, we introduce the API of AutoNavi map to realize the positioning and searching of available bikes around users. After the project enters the back-end development, the positioning device on each bicycle can be used to refresh the positioning on the map in real time. This will greatly facilitate users to find their most convenient bikes.
Source code：
During the programming implementation, the map container is built and the corresponding and scaling levels are set. Then create the corresponding marker point.
<div id="container"></div> <script> //初始化地图插件 window.onload = function () { var map = new AMap.Map("container", { zoom: 15, //设置地图显示的缩放级别 center: [113.93318, 22.53701] //设置地图中心点坐标 }); // 创建一个 Marker 实例：（标记点） var marker1 = new AMap.Marker({ position: new AMap.LngLat(113.98338, 22.53711), title: "bicycle1 available" }); var marker2 = new AMap.Marker({ position: new AMap.LngLat(113.91358, 22.53761), title: "bicycle2 available" }); var marker3 = new AMap.Marker({ position: new AMap.LngLat(113.93408, 22.59741), title: "bicycle3 available" }); var marker4 = new AMap.Marker({ position: new AMap.LngLat(113.98310, 22.54709), title: "bicycle4 available" }); var marker5 = new AMap.Marker({ position: new AMap.LngLat(113.93314, 22.53704), title: "bicycle5 available" }); // 将创建的点标记添加到已有的地图实例： map.add(marker1); map.add(marker2); map.add(marker3); map.add(marker4); map.add(marker5); } </script>
②Price calculating and path planning
After the departure and destination points and corresponding prices are set, the prices are automatically calculated and the route is planned.
Source code：
To achieve this function, we first design the input box and set the initial value of the corresponding element. Then link into the AutoNavi map API, build the map container, and put the map and route plan into the container. Finally, the calculation is done through JavaScript and the container is set to the anchor point. When the button is clicked, the route is calculated and jumps to the anchor point, so that the user can see the price and route planning directly. In order to make the jump of the anchor not abrupt, smooth sliding is achieved through JavaScript, which makes the website more beautiful.
<div id="search"> <div id="searchText">Departure: </div><input type="text" name="" id="startNode" /><br /><br /> <div id="searchText">Destination: </div><input type="text" name="" id="endNode" /><br /><br /> <div id="searchText">Basic Distance: </div><input type="text" name="" id="send" value="2" /><br /><br /> <div id="searchText">Basic Price: </div><input type="text" name="" id="startPrice" value="0.1" /><br /><br /> <div id="searchText">Price Per Kilometre: </div><input type="text" name="" id="price" value="0.2" /><br /><br /> <a><button id="btn">Start to Calculate</button></a> </div> <div id="window-container"> <table id="window" align="center"> <tr> <td> <div id="container" align="center"></div> </td> <td> <div id="panel"></div> </td> </tr> </table> </div> <div id="result" align="center"> <br /> <b>Total Distance: </b><span id="road">xx km</span> <b>Total Price: </b><span id="endPrice">xx ¥</span><br /> </div> <div id="navigation"> <script> var send = document.querySelector('#send') var startPrice = document.querySelector('#startPrice') var price = document.querySelector('#price') var road = document.querySelector('#road') var endPrice = document.querySelector('#endPrice') //初始化地图 var map = new AMap.Map('container', { center: [113.943487, 22.538249], lang: "en" }); new AMap.Autocomplete({ input: 'startNode' }); new AMap.Autocomplete({ input: 'endNode' }); btn.onclick = function () { if (send.value && startPrice.value && price.value) { //建立地图 new AMap.Riding({ map: map, panel: 'panel' }).search([ { keyword: startNode.value, city: '深圳' }, { keyword: endNode.value, city: '深圳' } ], function (status, data) { var distance = data.routes[0].distance console.log(data); console.log(data.routes[0].distance) //通过距离计算价格 if (distance > send.value * 1000) { var newPrice = parseInt(startPrice.value) + Math.ceil(distance / 1000 - send.value) * price.value endPrice.innerText = newPrice + ' ¥' } else { endPrice.innerText = startPrice.value + ' ¥' } road.innerText = (distance / 1000).toFixed(2) + ' km' }) //锚点平滑滑动 let anchorElement = document.getElementById('window-container'); if (anchorElement) { anchorElement.scrollIntoView({ behavior: 'smooth' }); } } else { alert('Please complete the information') } }; </script> </div>
③Message board
In order to enable users to contact with us, in addition to the QQ for contact, also can give us a message to get in touch with us.
In this project, we created a form that allows users to leave messages by filling in the form. We also use JavaScript to check what is entered if the data is improperly formatted or forgotten. We will give you eye-catching hints.
It is worth noticing that in this project we also introduced a Layui framework for layout purposes.
Source code：
Website Layout，and Website Presentational, Enhancement
1. CSS design document and functional description
①Top：
Top navigation is in the vast majority of pages, playing the role of navigation which makes it convenient for users to choose information they want.
②Footer:
The bottom footer is also present on most pages and acts as a copyright notice.
③Index：
③About Us&employees&employmers:
In the four pages under this section, the CSS styling is basically the same, with only a few differences. Only one is shown here.
④Administration, Legislation and Insurance Information.
Due to the uncertainty of the content of relevant laws, ‘Sample document.’ is only used here instead of the actual content.
⑤Price Calculator：
Most of CSS styles of this page are similar to the rest of the page, so we don’t show them, just the different parts.
⑥Contact Us：
Most of CSS styles of this page are similar to the rest of the page, so we don’t show them, just the different parts.
This page is set with layui which makes the website more beautiful.
On this page, we use JavaScript to validate the input:
2. User manual for the functions
①For employers：
For employers, you are welcomed to visit this website.
This website provides you with a wealth of information about Shared bikes. You can have a deeper understanding of our services in this website. You can also subscribe to our bike-sharing service on this website for your employees.
The first thing you see is the home page, no matter which page you are in you can click the left art character or the navigation ‘HOME’ to jump to the homepage.
You can click “About us” to view some information about us. Here are your reasons to share, our advantages, our service and our contact.
You can also select the corresponding employers section, get more information to communicate with our customer service to subscribe, and view administration, legislation and insurance Information.
Whenever a problem occurs, you are welcomed to send us a message in ‘Contact Us’ page. Our staff will reply you in 24 hours.
②For employees and other visitors：
For employees, you are welcomed to visit this website.
This website provides you with a wealth of information about Shared bikes. You can have a deeper understanding of our services in this website. You can also enjoy the subscription of our bike-sharing service on this website in your group.
The first thing you see is the home page, no matter which page you are in you can click the left art character or the navigation ‘HOME’ to jump to the homepage.
You can click “About us” to view some information about us. Here are your reasons to share, our advantages, our service and our contact.
You can also select the corresponding employees section. Here, you can use our interactive map to find the nearest available Shared bikes quickly and easily.
No matter which page you are in, you can click the right orange button which links some social media platform to share this website to your friends.
We also provide you with a price calculator. Here you can calculate your costs and plan your path. We will provide you with convenient and safe cycling routes.
Whenever a problem occurs, you are welcomed to send us a message in ‘Contact Us’ page. Our staff will reply you in 24 hours.
Project Results
Project Summary
Through the design of the bike-sharing website, I learned to make proper layout of the website and proper use of CSS and JavaScript. In addition, I also learned the process of doing a project, from the conception to the implementation of the code. Many difficulties were encountered, such as CSS typesetting errors, JavaScript did not run as desired results. At the beginning, what color to choose for the layout always bothered me. Later, when I saw the orange books on the table, I was inspired and chose orange as the overall style. A lot of difficulties have also occurred with JavaScript in projects. Because I’m not familiar with JavaScript, I often get errors or don’t get the results I want. Finally, after a little bit of testing, fortunately all have been solved. I also learned to read developer documentation for other platforms and use their APIs to achieve the functionality I wanted. This lays the foundation for the future study.
I benefited a lot from the study of front-end design in one semester and the design of this project in one month. The Front-end learning, makes me learn to use HTML to write beautiful pages, learn to use CSS to design the page style, learned to use JavaScript language programming to improve interaction. What’s more learned to reference the appropriate framework to improve the appearance of page style and interaction.
In addition, it also cultivated my character of never giving up. In the design of CSS styles, I will often come across styles that are not what I want them to be. This is where the changes need to be made. Analyzing the causes and making modifications becomes particularly important. Little by little, patient modification and debugging are essential to getting the style right. Every time I tried to correct the mistakes; I had a feeling that some of my knowledge was not solid.
In the future study, I will keep this course in mind, and never forget what this project brings me.
