設置座標
<script charset="utf-8" src="http://ditu.google.com/maps?file=api&v=2&key=<%=mapkey%>"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Copyright 2007 Google Inc.
// All Rights Reserved.
/**
* 這個例子演示了 Google 地圖 API 的以下功能:
* * 可拖拽的標記
* * 自定義標記的圖標
* * 計算地理距離
* * 事件處理（單擊）
* * 信息窗口
* * 和文檔模型(DOM)交互
*
* @author haogang
*/
var targets = [
{'name':'中心', 'pt':[37, 107], 'icon':'/images/google/images/blue'}
];
var markers = []; // 給用戶拖拽的標記
var targetMarkers = []; // 顯示正確答案的標記
var map; // 全局的 Google 地圖控件
/**
* 爲信息窗口創建 DOM 對象，包括地點的名稱和簡要描述
* @param {Number} i 該地點在 targets 數組中的下標
*/
function createInfoWindow(i) {
// 從網頁的隱藏部分載入該地點的描述性文字
var targetDescs = document.getElementById('targetDescs');
var desc = targetDescs.getElementsByTagName('div')[i].innerHTML;
// 爲信息窗口創建動態 DOM 對象，這裏我們用 DIV 標籤
var div = document.createElement('div');
div.innerHTML = '<div style="font-size: 9pt; width:300px"><b>'
+ targets[i]['name'] + '</b><br/>' + desc + '</div>';
// 當用戶關閉信息窗口時 Google Map API 會自動釋放該對象
return div;
}
/**
* 本函數爲每個地點創建兩個標記：一個給用戶拖拽，另一個顯示標準答案
* @param {Number} i 該地點在 targets 數組中的下標
*/
function createMarker(i) {
// 先創建給用戶拖拽的標記：一開始它們依次排列在地圖的左上角
// 下一行代碼演示瞭如何將 map 控件的像素座標轉化爲經緯度
<%if isnew=1 then
%>
var initPt = map.fromContainerPixelToLatLng(new GPoint((i + 1) * 100, 50));
<%else%>
var initPt = new GLatLng(<%=xzb%>, <%=yzb%>);
<%end if%>
var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');
// 參數 draggable: true 表示可拖拽
var marker=new GMarker(initPt, { draggable: true, icon: ico })
markers.push(marker);
//markers.push(new GMarker(initPt, { draggable: true, icon: ico }));
// 再創建正確答案的標記：將它們放在正確的位置上，而且是不可拖拽的
//var targetPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
//var marker = new GMarker(targetPt, { icon: new GIcon(ico) });
//targetMarkers.push(marker);
// 爲正確答案標記添加事件處理函數：用戶單擊它時會彈出信息窗口
GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindow('<%=sm%>');
}
);
map.addOverlay(markers[i]);
}
/**
* 創建地圖控件，以及兩組標記
*/
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById('map'));
// 將視圖移到中國
map.setCenter(new GLatLng(37, 107), 4);
// 給地圖添加內置的控件，分別爲：
// 平移及縮放控件（左上角）、比例尺控件（左下角）
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
//map.addControl(new GOverviewMapControl());
// 爲 targets 數組中的每個地點，創建兩個標記
for (i = 0; i < targets.length; i++) {
createMarker(i);
}
}
}
function getwz()
{
var marker = markers[0].getPoint();
var y = marker.lng();
var x = marker.lat();
alert(x)
}
//]]>
<body οnlοad="load()" οnunlοad="GUnload()" topmargin="0" leftmargin="0">
列表顯示
<script charset="utf-8" src="http://ditu.google.com/maps?file=api&v=2&key=<%=mapkey%>"
type="text/javascript"></script>
<script type="text/javascript">
//<
var targets = [
<%
while not rs.eof
%>
{'name':'<%=rs("buserc")%>', 'pt':[<%=rs("cxzbc")%>, <%=rs("yzbc")%>], 'icon':'/images/google/images/<%if rs("picc")=0 then response.write "blue" else response.write rs("pict") end if%>', 'pic':'<%=rs("pict")%>', 'sm':'<%=rs("smc")%>','sp':'<%=rs("usid")%>'},
<%
rs.movenext
wend
rs.close
set rs=nothing
cn.close
set cn=nothing
%>
{'name':'養殖商務網', 'pt':[39.69457354187826, 118.17776441574096], 'icon':'/images/google/images/red', 'pic':'0', 'sm':'養殖商務網歡迎您!<br><a href=http://www.yangzhi.com target=_blank><img src=http://www.yangzhi.com/logo.jpg border=0></a>','sp':'0'}
];
var markers = []; // 給用戶拖拽的標記
var targetMarkers = []; // 顯示正確答案的標記
var map; // 全局的 Google 地圖控件
/**
* 爲信息窗口創建 DOM 對象，包括地點的名稱和簡要描述
* @param {Number} i 該地點在 targets 數組中的下標
*/
function createInfoWindow(i) {
// 從網頁的隱藏部分載入該地點的描述性文字
var targetDescs = document.getElementById('targetDescs');
var desc = targetDescs.getElementsByTagName('div')[i].innerHTML;
// 爲信息窗口創建動態 DOM 對象，這裏我們用 DIV 標籤
var div = document.createElement('div');
div.innerHTML = '<div style="font-size: 9pt; width:300px"><b>'
+ targets[i]['name'] + '</b><br/>' + desc + '</div>';
// 當用戶關閉信息窗口時 Google Map API 會自動釋放該對象
return div;
}
/**
* 本函數爲每個地點創建兩個標記：一個給用戶拖拽，另一個顯示標準答案
* @param {Number} i 該地點在 targets 數組中的下標
*/
function createMarker(i) {
// 先創建給用戶拖拽的標記：一開始它們依次排列在地圖的左上角
// 下一行代碼演示瞭如何將 map 控件的像素座標轉化爲經緯度
var initPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
if(targets[i]['pic']=="0")
{
var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');
}
else
{
var ico = new GIcon(baseIcon, targets[i]['icon'] + '.png');
}
// 參數 draggable: true 表示可拖拽
var marker=new GMarker(initPt, { draggable: false, icon: ico })
markers.push(marker);
//markers.push(new GMarker(initPt, { draggable: true, icon: ico }));
// 爲正確答案標記添加事件處理函數：用戶單擊它時會彈出信息窗口
GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindow("<b>"+targets[i]['name']+"</b>:"+targets[i]['sm']+"<br><Br><a href=/"http://www.yangzhi.com/sp.asp?fid=" + targets[i]['sp'] + "/" target=_blank>我的商鋪</a> <a href=/"http://www.yangzhi.com/ly.asp?fid=" + targets[i]['sp'] + "/" target=_blank>給我留言</a>");
}
);
map.addOverlay(markers[i]);
markers[i].openInfoWindow("<b>"+targets[i]['name']+"</b>:"+targets[i]['sm']);
}
/**
* 創建地圖控件，以及兩組標記
*/
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById('map'));
// 將視圖移到中國
map.setCenter(new GLatLng(37, 107), 4);
// 給地圖添加內置的控件，分別爲：
// 平移及縮放控件（左上角）、比例尺控件（左下角）
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
//map.addControl(new GOverviewMapControl());
// 爲 targets 數組中的每個地點，創建兩個標記
for (i = 0; i < targets.length; i++) {
createMarker(i);
}
}
}
</script>
</head>
<body οnlοad="load()" οnunlοad="GUnload()" topmargin="0" leftmargin="0">
