Google map uses a custom marker to add text labels to a map

Google map uses a custom marker to add text marks to the map

Google map is the default gmarker. Only images cannot use text. However, in reality, we need to mark the text on the map. For example, place names. Google map API allows us to extend gmarker to implement labelmarker, a subclass of custom gmarker.

 

1 Google. Maps. labelmarker = function (latlng, options)
2 {
3 This. latlng = latlng;
4 This. labeltext = options. labeltext | '';
5 This. labelclass = options. labelclass | 'writeb ';
6 This. labeloffset = options. labeloffset | new Google. Maps. Size (8,-33 );
7 options. Icon = options. Icon | gettexticon ();
8 Google. Maps. Marker. Apply (this, arguments );
9}
10
11 Google. Maps. labelmarker. Prototype = new Google. Maps. Marker (new Google. Maps. latlng (0, 0 ));
12
13 Google. Maps. labelmarker. Prototype. initialize = function (MAP ){
14 Google. Maps. Marker. Prototype. Initialize. Call (this, MAP );
15
16 var label = Document. createelement ('div ');
17 label. classname = This. labelclass;
18 label. innerhtml = This. labeltext;
19 label. style. Position = 'absolute ';
20 label. style. width = '48px ';
21 map. getpane (g_map_marker_pane). appendchild (Label );
22
23 This. Map = map;
24 This. Label = label;
25}
26
27 Google. Maps. labelmarker. Prototype. redraw = function (Force ){
28 Google. Maps. Marker. Prototype. redraw. Call (this, MAP );
29
30 if (! Force)
31 {
32 return;
33}
34
35 var point = This. Map. fromlatlngtodivpixel (this. latlng );
36 var z = Google. Maps. Overlay. getzindex (this. latlng. LAT ());
37
38 This. Label. style. Left = (point. x + this. labeloffset. width) + 'px ';
39 This. Label. style. Top = (point. Y + this. labeloffset. Height) + 'px ';
40 this. Label. style. zindex = z + 1;
41}
42
43 Google. Maps. labelmarker. Prototype. Remove = function (){
44 This. Label. parentnode. removechild (this. Label );
45 this. Label = NULL;
46 Google. Maps. Marker. Prototype. Remove. Call (this );
47}
48
49 function gettexticon ()
50 {
51 var icon = new Google. Maps. Icon ();
52 icon. Image = "/JS/MAP/img/mapts.gif ";
53 icon. iconsize = new gsize (48, 40 );
54 icon. iconanchor = new gpoint (0, 40 );
55 icon. infographic wanchor = new gpoint (5, 1 );
56 return icon;
57}

Code called on the page:

 

1 var marker = new Google. Maps. labelmarker (Map. getcenter (),{
2 labeltext: 'Here I am'
3 });
4
5 map. addoverlay (Marker );

 

Now the custom gmarker ID is displayed on the map.

 

Http://www.cnblogs.com/hyl8218/archive/2009/12/26/1632524.html