Hvordan begynne en Google Maps-applikasjon med PHP

November 14

For å starte et Google Maps-programmet med PHP, må du opprette et PHP-script som vil utgangsdata som trengs av Google Maps-programmet i et XML format. Deretter må du opprette Google Maps-programmet funksjonalitet med HTML og Javascript og ringe PHP script for å hente dataene som trengs for kartet. Du kan eventuelt kapsle hele Google Maps-programmet i en PHP-fil, i stedet for i en HTML-fil, for å inkludere ekstra logikk.

Bruksanvisning

Lag PHP Script

1 Lag en PHP klasse å lagre lengde- og breddegrader og en beskrivelse. For eksempel inn:

<? Php

klasse Koordinering {

public $latitude, $longitude, $description;

offentlig funksjon __construct ($ lat, $ lng, $ beskrivelse) {

$ Dette-> breddegrad = $ lat;

$ Dette-> lengdegrad = $ lng;

$ Dette-> description = $ beskrivelse;

}

2 Lag en PHP klasse til å lagre en rekke koordinater forbundet med et identifikasjonsnavn og beskrivelse. Legg en funksjon til klassen for å sende ut et XML versjon av dataene. For eksempel inn:

klasse Koordinater {

protected $coordinates;

offentlig funksjon __construct () {

$ Dette-> koordinerer = array ();

}

offentlig funksjon add ($ name, $ beskrivelse, $ lat, $ lng) {

$ Dette-> koordinerer [$ navn] = ny Koordinere ($ lat, $ lng, $ beskrivelse);

}

offentlig funksjon output_xml () {

$ Xml = ny DOMDocument ( "1.0");

$ Node = $ xml-> createElement ( "markører");

$ Root = $ xml-> appendChild ($ node);

foreach ($ dette-> koordinater som $ key => $ value) {

$ Node = $ xml-> createElement ( "markør");

$ Newnode = $ root-> appendChild ($ node);

$ Newnode-> setAttribute ( "by", $ tasten);

$ Newnode-> setAttribute ( "lat", $ verdi-> breddegrad);

$ Newnode-> setAttribute ( "lng", $ verdi-> lengdegrad);

$ Newnode-> setAttribute ( "desc", $ verdi-> beskrivelse);

}

echo $ xml-> saveXML ();

}

3 Lag hoved PHP program for å lagre lengde- og breddegrad for utvalgte byer og utgang en XML-versjon av data når programmet kjøres. For eksempel inn:

$ byer = nye koordinater ();

$ Byer-> legge til ( "Nassau", "Bahamas", "25,08333", "-77,3333");

$ Byer-> legge til ( "Cairo", "Egypt", "36,01667", "31,2333");

$ Byer-> legge til ( "Paris", "Frankrike", "48,83333", "2,33333");

$ Byer-> legge til ( "Beijing", "Kina", "39,91667", "116,3333");

$ Byer-> legge til ( "Santiago", "Chile", "-33,40000", "-70,66667");

$ Byer-> output_xml ();

Lag Google Maps Application

4 Opprett en ny PHP-fil hvis du vil inkludere PHP logikk med hovedprogrammet. Lag HTML overskrifter for websiden. For eksempel inn:

<? Php

$ CUSTOM_NAME = "Steve";

<! DOCTYPE html>

<Head>

<Title> <? Php echo $ CUSTOM_NAME; ?> 'S kart over International Cities </ title>

5 Inkluder eksterne Google Maps API Javscript bibliotek. For eksempel inn:

6 Lag hovedJavaScript-program. Begynn skriptet ved å opprette en variabel til å lagre kartet. For eksempel inn:

var map;

7 Lag en funksjon for å vise kartet på skjermen. Begynn med å definere alternativene for kartet. Lag kartet og skape en variabel for pop-up informasjonsvinduet. For eksempel inn:

function create() {

Var NewYork = ny google.maps.LatLng (40,69847032728747, -73,9514422416687);

Var mapOptions = {zoom: 13, senter: newyork, MapTypeId: "veikart"};

kart = ny google.maps.Map (document.getElementById ( "kart"), mapOptions);

infoWindow = ny google.maps.InfoWindow;

8 Ring en funksjon som asynkront vil hente data fra PHP-filen. Lag tilbakeringingsfunksjonen som vil behandle data og plotte markørene på kartet. For eksempel inn:

downloadPHPData("coordinates.php", function(data) {

Var xml = data.responseXML;

Var markører = xml.documentElement.getElementsByTagName ( "markør");

for (var i = 0; i & lt; markers.length, jeg ++) {

Var i byen = markører [i] .getAttribute ( "by");

Var poeng = nye google.maps.LatLng (parseFloat (markører [i] .getAttribute ( "lat")), parseFloat (markører [i] .getAttribute ( "lng")));

Var html = city + "," + markører [i] .getAttribute ( "desc");

Var markør = ny google.maps.Marker ({kartet: kart, posisjon: punkt, tittel: city});

bindInfoWindow (markør, kart, infoWindow, html);

}

});

}

9 Lag funksjonen til asynkront hente data og gi det til tilbakeringingsfunksjonen. For eksempel inn:

function downloadPHPData(URL, callback) {

Var request = window.ActiveXObject? ny ActiveXObject ( "Microsoft.XMLHTTP"): ny XMLHttpRequest;

request.onreadystatechange = function () {

if (request.readyState == 4) {

request.onreadystatechange = doNothing;

tilbakeringing (forespørsel, request.status);

}

};

request.open ( 'GET', URL, true);

request.send (null);

}

fungere doNothing () {

}

10 Lag funksjonen til pop-up informasjonsvinduet når en markør klikkes. For eksempel inn:

function bindInfoWindow(marker, map, infoWindow, html) {

google.maps.event.addListener (markør, "klikk", function () {

infoWindow.setContent (html);

infoWindow.open (kart, men da);

});

}

11 Lukk skriptmerket, lukker hodet tag, og skape den viktigste HTML-kode for å etablere "div" for kartet, og å lansere "Create" -funksjonen når siden lastes. For eksempel inn:

</ Script>

</ Head>

<div id="map" style="width:800px; height:800px"></div>

</ Body>

</ Html>