[转载]Google API结合数据库动态显示地图标记和点击提示信息

原文地址：Google API结合数据库动态显示地图标记和点击提示信息 作者：andy1320

最近有空看了看google api，所以想着做一个结合数据库动态显示地图标记功能。前几天总算给弄出来了，先看效果图：

1、在地图上显示标记

首先得加载google的javascript。
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAVVFzpIll3fltTMQyYMoe_hSmLhMt0u5WYOzXR8D81pMB6TP2XBRIAJCSX7AegzaN337aA6yyfpqS9g&hl=en" type="text/javascript" charset="utf-8"></script>

本地测试可以不需要api key，参数hl是指语言，也可以使用使用默认的。使用sensor参数跟踪使用情况，也可省略。完整代码如下，后面就是在此基础上修改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Google Map Api </title>

<style>

body {font-size:12px; color:#333; font-family:Tahoma,Verdana,Segoe,sans-serif;}

</style>

</head>

window.onload = function() {

function createMarker(point) {

var marker = new GMarker(point);

return marker;

}

if (GBrowserIsCompatible()) { //检查兼容性

var map = new GMap2(document.getElementByIdx_x("map_canvas"));

map.setCenter(new GLatLng(22.557246992873218, 113.90215694904327), 15); //设置中心位置

map.addControl(new GLargeMapControl());

map.enableScrollWheelZoom();

//标记自己

var latlng = new GLatLng(22.557246992873218, 113.90215694904327);

map.addOverlay(createMarker(latlng));

}

</script>

</div>

</body>

</html>

2、实现点击标记出现提示信息窗口功能

该功能的实现主要是点击标记的时候，添加了"click"事件的监听器。事件监听器需要调用GEvent.addListener方法。创建一个信息窗口，调用openInfoWindow方法。所以修改createMarker函数。如下：
function createMarker(point,code) {

var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(code);

});

return marker;

}

同时：map.addOverlay(createMarker(latlng,"我的标记"));这样来传递显示的信息内容，可包含html代码。

到此，我们已实现了显示标记，并且出现提示信息窗口功能。可是我们可能不仅仅只显示一个标记，并且希望能控制这些参数？

3、添加多个标记。

添加多个其实很简单。做如下修改就可以。
//标记自己

var latlng = new GLatLng(22.557246992873218, 113.90215694904327);

map.addOverlay(createMarker(latlng,"我的标记1"));

var latlng = new GLatLng(22.55894272371135, 113.90369104763574);

map.addOverlay(createMarker(latlng,"我的标记2"));

4、结合数据库。将标记经纬度以及提示信息保存至数据库中。表数据如下

1）方法：用GDownloadUrl方法下载一个包含一个经纬度列表的XML文件。当下载完成，我们用GXml类来解析，并为XML文档中的每一个点建立一个标记。
GDownloadUrl("check.asp", function(data, responseCode) {

var xml = GXml.parse(data);

var markers = xml.documentElement.getElementsByTagName_r("marker");

for (var i = 0; i < markers.length; i++) {

var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

var pid=markers[i].getAttribute("pid");

map.addOverlay(createMarker(point, pid));

}

});

check.asp输出的是一个xml数据类似于：

源码如下：

Response.CodePage = 65001

Response.ExpiresAbsolute = Now() - 1

Response.Expires = 0

Response.CacheControl = "no-cache"

Response.AddHeader "Pragma", "No-Cache"

Response.ContentType="text/xml"

Response.Charset="utf-8"

sql="select * from db_product"

set rs=server.createobject("adodb.recordset")

rs.open sql,conn,1,1

if not rs.eof and not rs.bof then

response.write "<markers>"

do while not rs.eof

response.write "<marker lat="""&rs("lat")&""" lng="""&rs("lng")&""" pid="""&rs("id")&""" />"

rs.movenext

loop

response.write "</markers>"

end if

rs.close

set rs=nothing

2）需要注意的是上面提示的信息是各条记录的id，你也可以直接提示为描述（字段pname）。我这里做是因为我还想当我点击的时候能够再一次通过这个id来调用数据库中的数据，这以后也许有用，比如可通过这个id查询其他与其相关的数据，做成列表等等。这里我需要处理的就是标记click的监听事件。

进一步修改：

原：

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(code);

});

修改为：

GEvent.addListener(marker, "click", function() {

GDownloadUrl("show.asp?pid="+code, function(data, responseCode) {marker.openInfoWindowHtml(data);});

});//这里的code得到就是传递过来的pid

show.asp就是接收pid然后做相关的处理。我这里是输出描述（字段pname）
源码如下：

Response.CodePage = 65001

Response.ExpiresAbsolute = Now() - 1

Response.Expires = 0

Response.CacheControl = "no-cache"

Response.AddHeader "Pragma", "No-Cache"

Response.ContentType="text/xml"

Response.Charset="utf-8"

pid=request("pid")

sql="select * from db_product where id="&pid

set rs=server.createobject("adodb.recordset")

rs.open sql,conn,1,1

if not rs.eof and not rs.bof then

response.Write rs("pname")

end if

rs.close

set rs=nothing

5、进一步增加功能，改变条件显示不同的标记。也就是最终的结果，如本文最开始的效果图。

添加一个div,一个select:

</select>

</div>

[转载]Google API结合数据库动态显示地图标记和点击提示信息

猜你喜欢