Jquery | Css | Html | Javascript代写 | Php – Working Solution
Jquery | Css | Html | Javascript代写 | Php – 这是一个综合性的web开发任务，包括了后端数据处理和前端的数据可视化呈现，是一个比较典型的web代写任务
Working Solution
All Hamilton Recreation Centres
Infobox
Requirements
Create a Bing Map showing pushpins of all the Hamilton Region Recreational Centers.
Use the php conversion script created together in-class (Geocode_Rec_Centers.zip) to covert the this CSV file of recreation centre information (hamRecCenter.csv.txt) to a javascript array. The JavaSript array should contain the required recreation centre information, as well as the longtitude and latitude positions of the recreation centre addresses (obtained with the Bing Geocoding API). Use this JavaScript object in your solution (here is a text file of JSON data with the first two rec centers converted: hamRecCenter.json.txt).
Use the Bing Maps API to create the map and recreation centre markers (i.e. pushpins) and their associated infoboxes:
- The Getting Started Guide contains an excellent set of example code that demonstrates all the required functionality.
- You can get an API key at bingmapsportal.com, you’ll need to include this in your application.
Place pushpins on a Bing Map for all the Recreation Centers using the Bing Maps API. This is what it should look like: hamrec1.jpg.
Each pushpin is to have an infobox which pops up when the pushpin is clicked. The infoboxes are to have the following information:
- The complete address nicely formatted with a border that has rounded corners.
- An icon for the recreation center (like skates, etc)
- A "Bing Maps" link, that when clicked takes the user to a new page showing the location of the Recreation Center on a Bing Maps page. (Example link )
- A Long/Lat link, that when clicked returns the XML document from Bing that was used in determing the Long/Lat for an address (Example link)
This is what the infobox should look like: hamrec2.jpg
Use the Geolocation API to find the user’s current location when the page is first loaded, and place one additional pushpin on the map at the user’s location. This pushpin should have an infobox that simply states, "Current Location". If the Geolocation API is able to find the user’s location, output the longtitude and latitude co-ordinates below the Bing Map (i.e. longlat.jpg). If the Geolocation API is unable to find the user’s location, say for example because the user denies the request to share their location information, display a message beneath the Bing Map indicating why the location could not be found (i.e. error.jpg).
There must be a row of City Filter buttons at the top of the map. They should look like this: hamrec1.jpg. The buttons do not need to look identical to the working solution, but they should not look like text links, they should appear like butons (use css to do this, do not use the button html form input type). After clicking any one of the city buttons, the map must display pushpins only for the recreation centers for that city. After clicking the all button, the map must display pushpins for all of the recration centres. Whether the user clicks on a city button, or the all button, the pushpin for the user’s location should remain on the map.
Create a SHOW JSON DATA button that when clicked, will reveal the recreation center JSON object below the Bing Map. (Use jquery hide()/show()). You can format your property map to be printable with this line of code: JSON.stringify(propertymap, null, ‘ ’). This function returns a printable string. Place the printable string between
tags to preserve the white space.
