[Google Map]標籤加文字[1](LabeledMarker)
七月 17, 2008
標籤除了用圖之外還能加文字嗎？可以！
覆寫 GMarker 的 LabeledMarker#1 讓你不用為每個地點製作特別做一張圖示！
程式碼
LabeledMarker
// http://googlemapsbook.com/2007/01/22/extending-gmarker/
/* Constructor for an extended Marker class */
function LabeledMarker(latlng, options){
this.latlng = latlng;
this.labelText = options.labelText || "";
this.labelClass = options.labelClass || "markerLabel";
this.labelOffset = options.labelOffset || new GSize(0, 0);
GMarker.apply(this, arguments);
}
/* It's a limitation of JavaScript inheritance that we can't conveniently
extend GMarker without having to run its constructor. In order for the
constructor to run, it requires some dummy GLatLng. */
LabeledMarker.prototype = new GMarker(new GLatLng(0, 0));
// Creates the text div that goes over the marker.
LabeledMarker.prototype.initialize = function(map) {
// Do the GMarker constructor first.
GMarker.prototype.initialize.call(this, map);
var div = document.createElement("div");
div.className = this.labelClass;
div.innerHTML = this.labelText;
div.style.position = "absolute";
map.getPane(G_MAP_MARKER_PANE).appendChild(div);
this.map = map;
this.div = div;
}
// Redraw the rectangle based on the current projection and zoom level
LabeledMarker.prototype.redraw = function(force) {
GMarker.prototype.redraw.call(this, map);
// We only need to do anything if the coordinate system has changed
if (!force) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our rectangle
var p = this.map.fromLatLngToDivPixel(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 + 1; // in front of the marker
}
// Remove the main DIV from the map pane
LabeledMarker.prototype.remove = function() {
this.div.parentNode.removeChild(this.div);
this.div = null;
GMarker.prototype.remove.call(this);
}
javascript
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);
var map = null;
var arySite = new Array();
function initialize() {
// 檢查瀏覽器是否可使用 Google Map API
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// 設定地圖中心點
map.setCenter(new GLatLng(25.036772,121.520269), 11);
addSiteX(map,6,'板橋',25.012778,121.459167,'台北縣板橋市文化路一段25號',40,27,'懸浮微粒',0);
addSiteX(map,10,'淡水',25.164694,121.449139,'台北縣淡水鎮中正東路42巷6號',40,21,'懸浮微粒',0);
addSiteX(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',40,30,'懸浮微粒',0);
} // if
else {
alert('您的瀏覽器不支援Google Map');
} // else
}
function addSiteX(map, siteCode, siteDesc, lat, lng, address, type) {
var icon=new GIcon();
icon.image="images/red-marker.png";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(16, 16);
opts = {
"icon": icon,
"clickable": false,
"draggable": false,
"labelText": siteDesc,
"labelOffset": new GSize(-16, -16)
};
var mark = new LabeledMarker(new GLatLng(lat, lng), opts);
arySite[siteCode] = mark;
map.addOverlay(mark);
mark.div.onclick = function() {alert('測站：'+siteDesc+'\n地址：'+address);};
}
单击 “古亭”，访问数据库，将统计结果显示在旁边怎么做呢？
假设 古亭 是一个报刊亭，要统计销售数量
如果数据库有表
大厦名 x坐标 y坐标
山西大厦 123 456
河北大厦 234 678
研究院大厦 345 678
文字的字体，颜色，大小，和背景色怎么设置，文字背景形状怎么设置，想实现与字体大小一样大的矩形，文字数量是不一样长度
您的恢复太快了
有vs2005，aspx页面ajax 访问数据库的代码例子吗？我没用过 ajax
新建一点，当鼠标over时，在openInfoWindow 里显示从数据库读取的数据？
以下代码，以 在浏览器方式察看 方式执行，web.config 未作任何配置 , openInfoWindow 应该是返回 PSchart.ashx.cs 文件 的 Hello World，但是是空白
点加载代码
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917,116.397), 14);
var latlng = new GLatLng(39.907,116.367);
marker = new GMarker(latlng, {draggable:true});
GEvent.addListener(marker, "click", function()
{
var abc = showCustomer(‘ddd’) //调用 js文件 DealInfo.js
marker.openInfoWindow(abc); //显示 ajax 访问数据库的值
});
map.addOverlay(marker);
}
}
////////////////////
DealInfo.js 代码
var xmlHttp
function showCustomer(str)
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url = "PSchart.ashx"; //调用 PSchart.ashx
url = url + "?q="+ str;
url = url + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
return xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
////////////////
PSchart.ashx 文件
////////////////////
PSchart.ashx.cs 文件
using System;
using System.Web;
using System.Web.SessionState;
using System.Collections;
using System.Data.OleDb;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
class PSchart:IHttpHandler,IRequiresSessionState
{
public bool IsReusable
{
get{return false;}
}
public void ProcessRequest(HttpContext context)
{
context.Response.ClearContent();
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
context.Response.End();
}
看了您的文章，受益良多。
謝謝