google地图和php+mysql集合的例子(二)

1、google 地图和 php+mysql 集合的例子（二）filed under php post by 蜗牛爱吃巧克力 -pp815 / 2011-3-27 10:29 sunday 接着 google 地图和 php+mysql 集合的例子（一） 将数据库的标记显示在地图上面。1、新建个 phpsqlajax_genxml.php文件?php require(conn.php); mysql_query(set names gbk); /使用 gbk 中文编码 ; error_reporting(0); function parsetoxml($htmlstr) $xmlstr=str_r

2、eplace(,>,$xmlstr); $xmlstr=str_replace(,",$xmlstr); $xmlstr=str_replace(,',$xmlstr); $xmlstr=str_replace(&,&,$xmlstr); return $xmlstr; / select all the rows in the markers table $query = select * from markers where 1; $result = mysql_query($query); if (!$result)

3、die(invalid query: . mysql_error(); header(content-type: text/xml;charset=gb2312); / start xml file, echo parent node echo ; / iterate through the rows, printing xml nodes for each while ($row = mysql_fetch_assoc($result) / add to xml document node echo ; / end xml file echo ; ? 2、新建主页 index.html go

4、ogle maps ajax + mysql/php example /!cdata var iconblue = new gicon(); iconblue.image = http:/gmaps- iconblue.shadow = ; iconblue.iconsize = new gsize(32, 32); iconblue.shadowsize = new gsize(22, 20); iconblue.iconanchor = new gpoint(16, 16); iconbwindowanchor = new gpoint(5, 1); var iconred

5、 = new gicon(); iconred.image = http:/gmaps- iconred.shadow = ; iconred.iconsize = new gsize(32, 32); iconred.shadowsize = new gsize(22, 20); iconred.iconanchor = new gpoint(16, 16); iconrwindowanchor = new gpoint(5, 1); var customicons = ; customiconsrestaurant = iconblue; customiconsbar = i

6、conred; var markergroups = restaurant: , bar: ; function load() if (gbrowseriscompatible() var map = new gmap2(document.getelementbyid(map); map.addcontrol(new gsmallmapcontrol(); map.addcontrol(new gmaptypecontrol(); map.setcenter(new glatlng(32.03602,118.795166), 11); gdownloadurl(phpsqlajax_genxm

7、l2.php, function(data) var xml = gxml.parse(data); var markers = xml.documentelement.getelementsbytagname(marker); for (var i = 0; i markers.length; i+) var name = markersi.getattribute(name); var address = markersi.getattribute(address); var type = markersi.getattribute(type); var point = new glatl

8、ng(parsefloat(markersi.getattribute(lat), parsefloat(markersi.getattribute(lng); var marker = createmarker(point, name, address, type); map.addoverlay(marker); ); function createmarker(point, name, address, type) var marker = new labeledmarker(point, icon: customiconstype, labeltext: name, labeloffs

9、et: new gsize(-6, -10); markergroupstype.push(marker); var html = + name + + address; gevent.addlistener(marker, click, function() marker.openinfowindowhtml(html); ); return marker; / 3、另外有个 js 文件 labeledmarker.js，这个文件主要是关于标记样式、信息的, 里面有注释，不过是英文的，呵呵/* * labeledmarker class, v1.2 * * copyright 2007 mi

10、ke purvis (http:/) * * licensed under the apache license, version 2.0 (the license); * you may not use this file except in compliance with the license. * you may obtain a copy of the license at * * /licenses/license-2.0 * * unless required by applicable law or agreed to in writin

11、g, software * distributed under the license is distributed on an as is basis, * without warranties or conditions of any kind, either express or implied. * see the license for the specific language governing permissions and * limitations under the license. * * this class extends the maps apis standar

12、d gmarker class with the ability * to support markers with textual labels. please see articles here: * * http:/ * http:/ */ /* * constructor for labeledmarker, which picks up on strings from the gmarker * options array, and then calls the gmarker constructor. * * param glatlng latlng * param gmarker

13、options named optional arguments: * opt_opts.labeltext string text to place in the overlay div. * opt_opts.labelclass string class to use for the overlay div. * (default labeledmarker_markerlabel) * opt_opts.labeloffset gsize label offset, the x- and y-distance between * the markers latlng and the u

14、pper-left corner of the text div. */ function labeledmarker(latlng, opt_opts) this.latlng_ = latlng; this.opts_ = opt_opts; this.labeltext_ = opt_opts.labeltext | ; this.labelclass_ = opt_opts.labelclass | labeledmarker_markerlabel; this.labeloffset_ = opt_opts.labeloffset | new gsize(0, 0); this.cl

15、ickable_ = opt_opts.clickable | true; this.title_ = opt_opts.title | ; this.labelvisibility_ = true; if (opt_opts.draggable) / this version of labeledmarker doesnt support dragging. opt_opts.draggable = false; gmarker.apply(this, arguments); ; / its a limitation of javascript inheritance that we can

16、t conveniently / inherit from gmarker without having to run its constructor. in order for / the constructor to run, it requires some dummy glatlng. labeledmtotype = new gmarker(new glatlng(0, 0); /* * is called by gmap2s addoverlay method. creates the text div and adds it * to the relevant

17、parent div. * * param gmap2 map the map that has had this labeledmarker added to it. */ labeledmtotype.initialize = function(map) / do the gmarker constructor first. gmtotype.initialize.apply(this, arguments); this.map_ = map; this.div_ = document.createelement(div); this.div_.clas

18、sname = this.labelclass_; this.div_.innerhtml = this.labeltext_; this.div_.style.position = absolute; this.div_.style.cursor = pointer; this.div_.title = this.title_; map.getpane(g_map_marker_pane).appendchild(this.div_); if (this.clickable_) /* * creates a closure for passing events through to the

19、source marker * this is located in here to avoid cluttering the global namespace. * the downside is that the local variables from initialize() continue * to occupy space on the stack. * * param object object to receive event trigger. * param geventlistener event to be triggered. */ function newevent

20、passthru(obj, event) return function() gevent.trigger(obj, event); ; / pass through events fired on the text div to the marker. var eventpassthrus = click, dblclick, mousedown, mouseup, mouseover, mouseout; for(var i = 0; i eventpassthrus.length; i+) var name = eventpassthrusi; gevent.adddomlistener

21、(this.div_, name, neweventpassthru(this, name); ; /* * call the redraw() handler in gmarker and our our redrawlabel() function. * * param boolean force will be true when pixel coordinates need to be recomputed. */ labeledmtotype.redraw = function(force) gmtotype.redraw.apply(this,

22、arguments); this.redrawlabel_(); ; /* * moves the text div based on current projection and zoom level. */ labeledmtotype.redrawlabel_ = function() / calculate the div coordinates of two opposite corners of our bounds to / get the size and position of our rectangle var p = this.map_.fromlatl

23、ngtodivpixel(this.latlng_); var z = goverlay.getzindex(this.latlng_.lat(); / now position our div based on the div coordinates of our bounds this.div_.style.left = (p.x + this.labeloffset_.width) + px; this.div_.style.top = (p.y + this.labeloffset_.height) + px; this.div_.style.zindex = z; / in fron

24、t of the marker ; /* * remove the text div from the map pane, destroy event passthrus, and calls the * default remove() handler in gmarker. */ labeledmtotype.remove = function() gevent.clearinstancelisteners(this.div_); if (this.div_.outerhtml) this.div_.outerhtml = ; /prevent pseudo-leak i

25、n ie if (this.div_.parentnode) this.div_.parentnode.removechild(this.div_); this.div_ = null; gmtotype.remove.apply(this, arguments); ; /* * return a copy of this overlay, for the parent map to duplicate itself in full. this * is part of the overlay interface and is used, for example, to co

26、py everything in the * main view into the mini-map. */ labeledmtotype.copy = function() return new labeledmarker(this.latlng_, this.opts_); ; /* * shows the marker, and shows label if it wasnt hidden. note that this function * triggers the event gmarker.visibilitychanged in case the marker

27、is currently hidden. */ labeledmtotype.show = function() gmtotype.show.apply(this, arguments); if (this.labelvisibility_) this.showlabel(); else this.hidelabel(); ; /* * hides the marker and label if it is currently visible. note that this function * triggers the event gmarker.visibilitychanged in case the marker is currently visible. */ labeledmtotype.hide = function() gmtotype.hide.apply(this, arguments); this.hidelabel(); ; /* * repositions label and marker when setlatlng is called. */ labeledmtotyp