Archive

For the Google Map category

Jul 11

google map自定义标记

By mmxcqNo Comments

<!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 Maps JavaScript API Example</title>

<style type=”text/css”>

*{margin:0;padding:0;}

.market{background:#f30;color:#fff;border:3px solid #fcc;padding:10px;}

</style>

    <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg” type=”text/javascript”></script>

    <script type=”text/javascript”>

google.maps.FocusMarker = function(latlng, opt){

          this.latlng = latlng;

          this.innerHtml = opt.innerHtml || ”;

          this.className = opt.className || ”;

          this.css = opt.css || {};

          this.id = opt.id || ”;

      }

      google.maps.FocusMarker.prototype = new google.maps.Overlay();

      google.maps.FocusMarker.prototype.initialize = function(map){

         // 创建用于表示该矩形区域的 DIV 元素

         var div = document.createElement(“div”);

         div.id = this.id || ”;

         div.style.width = this.css.width || ‘auto’;

         div.className = this.className;

         div.style.border = this.css.border || “none”;

         div.style.color = this.css.color || “#ffffff”;

         div.style.backgroundColor = this.css.backgroundColor || “”;

         div.style.position = this.css.position || “absolute”;

         div.style.textAlign= this.css.textAlign || “center”;

         div.style.padding= this.css.padding || “0px 0px 0px 0px”;

         div.style.fontSize = this.css.fontSize || “12px”;

         div.style.height = this.css.height || “60px”;

         div.style.cursor = this.css.cursor || “pointer”;

         div.style.whiteSpace= this.css.whiteSpace || “nowrap”;

        


         var c = map.fromLatLngToDivPixel(this.latlng);

         div.style.left = c.x+”px”;

         div.style.top = c.y+”px”;

         div.innerHTML = this.innerHtml;

         // 我们希望将覆盖物紧贴于地图之上，因此我们把它放置在 Z 序最小的 G_MAP_MAP_PANE 层，

         // 事实上，这也是地图本身的 Z 顺序，即在标注的影子之下

         map.getPane(G_MAP_MAP_PANE).appendChild(div);

         this.map = map;

         this.container = div;

     }

     google.maps.FocusMarker.prototype.remove = function()

     {

         this.container.parentNode.removeChild(this.container);

     }

     google.maps.FocusMarker.prototype.redraw = function(force)

     {

         // 只有当坐标系改变时，我们才需要重绘

         if (!force) return;


         // 根据当前显示区域的经纬度坐标，计算 DIV 元素的左上角和右下角的像素坐标

         var c = this.map.fromLatLngToDivPixel(this.latlng);

         // 根据计算得到的坐标放置我们的 DIV 元素

         this.container.style.left = c.x + “px”;

         this.container.style.top = c.y + “px”;

         // this.div_.style.width = “auto”;

     }

function load() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById(“map”));

        map.addControl(new GSmallMapControl());

        map.addControl(new GScaleControl());

        map.setCenter(new GLatLng(39.917, 116.397), 14);

   map.addOverlay(new google.maps.FocusMarker(new GLatLng(39.917,116.397),{

             innerHtml : ‘<div class=”market”>自定义信息内容</div>’

        }));

      }

    }

    </script>

</head>

<body onload=”load()” onunload=”GUnload()”>

    <div id=”map” style=”width: 500px; height: 300px”></div>

</body>

</html>

Jul 11

google map自定义GMarker的方法

By mmxcqNo Comments

以前写过一个实现自定义google地图的文字Marker的方法google map使用自定义Marker在地图上添加文字标示，实现的方法是继承google map的GMarker。GMarker是继承的GOverlay，所以也可以直接继承GOverlay实现自定义的地图标记。

接口 GOverlay

地图 API 库中的 GMarker、GPolyline、GTileLayerOverlay 和 GInfoWindow 类都是通过此接口实现的。如果希望在地图上显示自定义的叠加层对象类型，可以实现这一功能。可使用 GMap2.addOverlay() 方法将 GOverlay 的实例放置于地图上。然后，地图在叠加层实例上调用 GOverlay.initialize() 方法，先将自己显示在地图上。每当地图显示更改时，地图都会调用 GOverlay.redraw()，这样叠加层就可以在需要时对自己进行重新放置。叠加层实例可使用方法 GMap2.getPane() 获取一个或多个自己要附加的 DOM 容器元素。

1 google.maps.FocusMarker = function(latlng, opt){
2         this.latlng = latlng;
3         this.innerHtml = opt.innerHtml || ”;
4         this.className = opt.className || ”;
5         this.css = opt.css || {};
6         this.id = opt.id || ”;
7      }
8      google.maps.FocusMarker.prototype = new google.maps.Overlay();
9      google.maps.FocusMarker.prototype.initialize = function(map){
10         // 创建用于表示该矩形区域的 DIV 元素
11         var div = document.createElement(“div“);
12          div.id = this.id || ”;
13          div.style.width = this.css.width || ‘auto‘;
14          div.className = this.className;
15          div.style.border = this.css.border || “none“;
16          div.style.color = this.css.color || “#ffffff“;
17          div.style.backgroundColor = this.css.backgroundColor || “”;
18          div.style.position = this.css.position || “absolute“;
19          div.style.textAlign= this.css.textAlign || “center“;
20          div.style.padding= this.css.padding || “0px 0px 0px 0px“;
21          div.style.fontSize = this.css.fontSize || “12px“;
22          div.style.height = this.css.height || “60px“;
23          div.style.cursor = this.css.cursor || “pointer“;
24          div.style.whiteSpace= this.css.whiteSpace || “nowrap“;
25         
26
27         var c = map.fromLatLngToDivPixel(this.latlng);
28          div.style.left = c.x+“px“;
29          div.style.top = c.y+“px“;
30          div.innerHTML = this.innerHtml;
31         // 我们希望将覆盖物紧贴于地图之上，因此我们把它放置在 Z 序最小的 G_MAP_MAP_PANE 层，  
32         // 事实上，这也是地图本身的 Z 顺序，即在标注的影子之下  
33          map.getPane(G_MAP_MAP_PANE).appendChild(div);
34         this.map = map;  
35         this.container = div;
36      }
37      google.maps.FocusMarker.prototype.remove = function()
38      {  
39         this.container.parentNode.removeChild(this.container);
40      }
41      google.maps.FocusMarker.prototype.redraw = function(force)
42      {
43         // 只有当坐标系改变时，我们才需要重绘
44         if (!force) return;
45
46         // 根据当前显示区域的经纬度坐标，计算 DIV 元素的左上角和右下角的像素坐标
47         var c = this.map.fromLatLngToDivPixel(this.latlng);
48         // 根据计算得到的坐标放置我们的 DIV 元素
49         this.container.style.left = c.x + “px“;
50         this.container.style.top = c.y + “px“;
51         // this.div_.style.width = “auto”;
52      }

使用方法：

1 map.addOverlay(new google.maps.FocusMarker(latlng,{
2              innerHtml : ‘<div class=”blmz left bold”>时间</div><div class=”left yblm”>地点</div>‘
3          }));