Xem mẫu

6676CH10.qxd 9/27/06 11:59 AM Page 164 164 CHAPTER 10 SPATIALLY ENABLED WEB APPLICATIONS This included file (functions.js) is where all of your JavaScript-based Ajax function-ality is located, as well as where the Google map code is contained. We will analyze this file in more detail next: Video Games Jones-ing Helper Using the onload event, you initialize your application. As you will see later when you look at functions.js, you pass the ID of the div that holds the Google map, and the ID of the div that holds your status message:
Every application that uses Google Maps must have an HTML element (such as a div) in which the map can be loaded. You are free to style it however you want (Google maps will display based on the width and height attributes, which you specify in your style sheet), but this is the element the map will attempt to load into:
Next, you have your div to hold application status messages. You first check whether a message has been set via URL, and display that. If it hasn’t been set, you output an empty div, and then hide it via CSS. This will be used later by JavaScript, which will popu-late the div and then make it visible again: 0) { ?>
Last, you display the form used to add new locations. You use the onsubmit event so that you can use Ajax to process the form, but also allow it to fall back to use the process_form.php script directly if JavaScript isn’t enabled: 6676CH10.qxd 9/27/06 11:59 AM Page 165 CHAPTER 10 SPATIALLY ENABLED WEB APPLICATIONS 165

Add a New Location:


6676CH10.qxd 9/27/06 11:59 AM Page 166 166 CHAPTER 10 SPATIALLY ENABLED WEB APPLICATIONS All right, so here is your functions.js file; this is where all of the Google Maps func-tionality and Ajax-based concepts are happening. Let’s have a closer look. You first define mapContainer and msgContainer, which will hold the divs you created to hold your map and status message, respectively. You set these in the init() method. Next, you set the default values for your map: the default latitude and longitude and the zoom level. In this case, your map will automatically center on Calgary. Next, you set the URL from which you fetch the locations. Although this is a PHP file, it will return XML data, which you can then plot on your map. Finally, you have two small utility functions. The first is used to trim a value, which works the same as PHP’s trim function (removing whitespace from the beginning and end of a string). You use this in your basic form validation. The second is used to write a message to your status message div. //functions.js // div to hold the map var mapContainer = null; // div to hold messages var msgContainer = null; // coords for Calgary var mapLng = -114.06; var mapLat = 51.05; var mapZoom = 7; // locations xml file var locationsXml = `locations.php`; function trim(str) { return str.replace(/^(\s+)?(\S*)(\s+)?$/, `$2`); } function showMessage(msg) { if (msg.length == 0) msgContainer.style.display = `none`; else { msgContainer.innerHTML = msg; msgContainer.style.display = `block`; } } 6676CH10.qxd 9/27/06 11:59 AM Page 167 CHAPTER 10 SPATIALLY ENABLED WEB APPLICATIONS 167 Next you have your script initialization function. This is the function you called in the onload event in sample10_1.php. Here you set the elements that will hold your Google map and your status message. After this has been set, you call loadMap, which displays the map based on your settings and loads your various points. We will look at this function more closely shortly: function init(mapId, msgId) { mapContainer = document.getElementById(mapId); msgContainer = document.getElementById(msgId); loadMap(); } The next function you define is a handy little function that creates a marker for your Google map.This doesn’t actually add the marker to the map—you create the point using this function then add it later on. The first parameter to this function is the map point, which you also create else-where based on a location’s latitude and longitude. The second parameter contains the HTML you will display inside the pop-up window. function createInfoMarker(point, theaddy) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(theaddy); } ); return marker; } This next function is the core function behind generating your Google map.You first create your map using the GMap class (provided by the Google JavaScript file you included earlier), and then you add some features to the map (the zoom control and ability to change the map type). You then center your map on the coordinates defined previously. Next, you use Ajax to load the locations from your database. Here you are using Google’s code to generate your XMLHttpRequest object, just for the sake of completeness. You then define your onreadystatechange function as in previous examples. This function uses the returned XML from your locations.php file. You use the built-in JavaScript func-tions for handling XML to read each row, creating a point (using Google’s GPoint class), and defining the marker HTML. You then call your createInfoMarker function to generate a marker that you can then add to the Google map. 6676CH10.qxd 9/27/06 11:59 AM Page 168 168 CHAPTER 10 SPATIALLY ENABLED WEB APPLICATIONS You will notice that this code is using the POST method to get the data, and also that a dummy string is sent (a, in this case). The reason for doing this is that Internet Explorer will cache the results from a GET request (as it will if you use POST and send a null string to the send function). Doing it this way means that the locations file will be correctly reloaded when a new location is added: function loadMap() { var map = new GMap(mapContainer); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.centerAndZoom(new GPoint(mapLng, mapLat), mapZoom); var request = GXmlHttp.create(); request.open("POST", locationsXml, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = request.responseXML; var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new GPoint(parseFloat(markers[i].getAttribute("longitude")), parseFloat(markers[i].getAttribute("latitude"))); var theaddy = `
` + markers[i].getAttribute(`locname`) + `
`; theaddy += markers[i].getAttribute(`address`) + `
`; theaddy += markers[i].getAttribute(`city`) + `, ` + markers[i].getAttribute(`province`) + `
` + markers[i].getAttribute(`postal`) + `
`; var marker = createInfoMarker(point, theaddy); map.addOverlay(marker); } } } request.send(`a`); } The final function in your functions.js file is the submitForm function, which is called when the user submits the form. The first few lines in this function define a list of the fields you will be submitting, along with a corresponding error message if an invalid ... - tailieumienphi.vn