1, 本例子实现了根据给出的经度,维度在google地图上做标记。
2, 并且能够反应出对应的经度和维度的一些自定义信息
3,数据来源自数据库,连接的数据库为SQLServer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-
microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
<title>Google Maps API Example: Simple Geocoding</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-
jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
type="text/javascript"></script>
<script type="text/javascript">
/*参考资料
http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlajax.html
*/
//定义map 的全局变量
var map = null;
var geocoder = null;
var objRs= new ActiveXObject("ADODB.Recordset");
//js连接数据库
var sSQL1 ="";
sConn = "Provider=SQLOLEDB.1;Password=123;Persist Security Info=False;User ID=sa;Initial Catalog=admin_xm;";
sSQL1 = "select * from ss";
// alert(sSQL1);
objRs.Open(sSQL1,sConn);
alert(" HTML Link success");
//onload 网页被加载完的时候立即发生
window.οnlοad=function(){
initialize();
TagIt(0.0,0.0);
}
function initialize() {
if (GBrowserIsCompatible()) {
//第一步创建一个GMap2对象
map = new GMap2(document.getElementById("map_canvas"));
//必须给map对象一个setCenter map对象才能正常工作
map.setCenter(new GLatLng(30.0, 110.1419), 10);
//定义在地图上要显示图标的标志的背景图案
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow="http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20,34);
baseIcon.shawdowSize = new GSize(37,34);
baseIcon.iconAnchor = new GPoint(9,34);
baseIcon.infoWindowAnchor = new GPoint(9,2);
//添加自定义图标函数
function createMaker(point,index){
var gIcon = new GIcon(baseIcon);
gIcon.image ="file:///E:/image/tadiao.png";
//markeOptions 定义要加载的图案,在GMarker中调用
markerOptions = {icon:gIcon };
//GMarker 定义的选项(图案) 在point点进行标记
//将标记对象添加到地图中后,通过标记可打开该地图的信息窗口。标记对象会触发鼠标事件和信息窗口事件。
var marker = new GMarker(point,markerOptions);
//增加监听的事件,这里增加了一个点击事件,当点击鼠标的时候触发事件
var info="宜昌";
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(info);
});
return marker;
}
//要添加图标的点
var latlng = new GLatLng(30,110.14);
// 将叠加层添加到地图中,并触发 addoverlay 事件。
map.addOverlay(createMaker(latlng));
}
geocoder = new GClientGeocoder();
}
function TagIt(a,b){
if (GBrowserIsCompatible()) {
map.addControl(new GMapTypeControl());
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow="http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20,34);
baseIcon.shawdowSize = new GSize(37,34);
baseIcon.iconAnchor = new GPoint(9,34);
baseIcon.infoWindowAnchor = new GPoint(9,2);
function createMaker1(point,address,index){
var gIcon = new GIcon(baseIcon);
gIcon.image ="file:///E:/image/tadiao.png";
markerOptions = {icon:gIcon };
var marker = new GMarker(point,markerOptions);
var infomation;
infomation="<b>" + point + "</b> <br/>" + address;
// alert(infomation);
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(infomation);
});
return marker;
}
// alert("yes");
var latlng;
//利用数据库中的经度和纬度进行标记
while(!objRs.EOF){
latlng = new GLatLng(objRs(2),objRs(1));
// alert(latlng);
map.addOverlay(createMaker1(latlng,objRs(3)));
objRs.MoveNext();
}
}
}
function showAddress(address) {
if (geocoder)
{
if(address=="")
{
return;
}
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("无法解析:" + address);
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng
().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng
().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
else
{
var geocoder2 = new GClientGeocoder();
geocoder2.getLatLng(
address,
function(point) {
if (!point) {
alert("无法解析:" + address);
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng
().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng
().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
function Parse()
{
showAddress(document.getElementById
("address").value.toString());
}
</script>
</head>
<!-- <body οnlοad="initialize()" οnunlοad="GUnload()"> -->
<body >
<form action="#" οnsubmit="showAddress(this.address.value);
return false">
<p>
地址:<input id="passAddress" type="text" style="width: 350px" name="address" value="" />
<input id="Find" type="submit" value="定位" />
</p>
<div id="map_canvas" style="width: 750px; height: 550px">
</div>
</form>
</body>
</html>
参考链接:
http://apps.hi.baidu.com/share/detail/37300274
http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlajax.html
http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html