google map结合数据库加载地图
2012-08-28 16:23
309 查看
最近有空看了看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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map Api </title>
<style>
body {font-size:12px; color:#333; font-family:Tahoma,Verdana,Segoe,sans-serif;}
</style>
</head>
<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>
<script type="text/javascript">
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>
<body style="text-align:center;" onunload="GUnload()" >
<div id="d_map" style="background-color:#FFF;border:solid 1px gray;width:750px; margin:50px auto;">
<div style="width:750px; height:500px;background-color:#f3f3f3;" id="map_canvas"></div>
</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数据类似于：
源码如下：
<!--#include file="conn.asp"-->
<%
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）
源码如下：
<!--#include file="conn.asp"-->
<%
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:
<div id="str">
<select id="categoryid" name="categoryid" onChange="change(this.options[this.selectedIndex].value);">
<option value="">所有类别</option>
<option value="1">类别1</option>
<option value="2">类别2</option>
<option value="3">类别3</option>
</select>
</div>
相关函数如下：
function change(categoryid){
var map = new GMap2(document.getElementByIdx_x("map_canvas"));
map.setCenter(new GLatLng(22.557246992873218, 113.90215694904327), 15);
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
GDownloadUrl("check.asp?categoryid="+categoryid, 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(createMarker1(point,pid)); //不知道为何用原createMarker就出错。
}
});
}
function createMarker1(point, code) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
GDownloadUrl("show.asp?pid="+code, function(data, responseCode) {marker.openInfoWindowHtml(data);});
});
return marker;
}
PS：以上js有很多重复的，应该是可以精简的。
Google api：http://www.codechina.org/doc/google/gmapapi/。
如果放网上需要自己去去申请key。
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map Api </title>
<style>
body {font-size:12px; color:#333; font-family:Tahoma,Verdana,Segoe,sans-serif;}
</style>
</head>
<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>
<script type="text/javascript">
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>
<body style="text-align:center;" onunload="GUnload()" >
<div id="d_map" style="background-color:#FFF;border:solid 1px gray;width:750px; margin:50px auto;">
<div style="width:750px; height:500px;background-color:#f3f3f3;" id="map_canvas"></div>
</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数据类似于：
源码如下：
<!--#include file="conn.asp"-->
<%
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）
源码如下：
<!--#include file="conn.asp"-->
<%
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:
<div id="str">
<select id="categoryid" name="categoryid" onChange="change(this.options[this.selectedIndex].value);">
<option value="">所有类别</option>
<option value="1">类别1</option>
<option value="2">类别2</option>
<option value="3">类别3</option>
</select>
</div>
相关函数如下：
function change(categoryid){
var map = new GMap2(document.getElementByIdx_x("map_canvas"));
map.setCenter(new GLatLng(22.557246992873218, 113.90215694904327), 15);
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
GDownloadUrl("check.asp?categoryid="+categoryid, 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(createMarker1(point,pid)); //不知道为何用原createMarker就出错。
}
});
}
function createMarker1(point, code) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
GDownloadUrl("show.asp?pid="+code, function(data, responseCode) {marker.openInfoWindowHtml(data);});
});
return marker;
}
PS：以上js有很多重复的，应该是可以精简的。
Google api：http://www.codechina.org/doc/google/gmapapi/。
如果放网上需要自己去去申请key。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- flex4.6 + openscales2.2 + geoserver2.02基本地图显示（坐标定位、初始比例、空间数据库配置及加载）
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
- web站点递归绑定数据库的站点地图（SiteMapPath控件与Web.sitemap结合）
- OpenLayers-加载地图数据(Google Map)
- （转）OpenLayers-加载地图数据(Google Map)
- WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
- OpenLayers-加载地图数据(Google Map)
- WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
- OpenLayers-加载地图数据(Google Map)
- Google Map API 结合PHP实现登录地图定位
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
- Python 加载数据到数据库
- ssm练手（CRUD） 2、修改sql方法，并利用JUnit结合数据库进行测试
- 案例(用封装的ajax加载数据库的数据到页面)
- thinkphp中无法加载数据库驱动
- 使用百度地图离线JavaScript API加载本地瓦片地图
- oracle安装时出现"加载数据库错误areasQueries"错误的解决办法
- extjs4.1 和struts2结合使用时延迟加载js，可使用extjs的mvc模式