Google Maps APIv3。标记文本根据文本更改样式

时间:2012-03-15 13:46:50

标签: google-maps-api-3 google-visualization

我正在从数组添加标记到谷歌地图,所有标记都具有相同的样式和两种不同的字体大小。其中两个标记看起来比其他标记更薄,风格相同。

在下面的页面中,标记'Klong Kong'和'Ban Thung'与相同款式/尺寸的其他标记相比更薄。如果我更改标记文字,例如'Klong Kong'到'Klong Kongx'它呈现得很好,似乎特定的标记文字正在引起我的问​​题。

示例:

<!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" lang="en">
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TEST MAP</title>
        <style type="text/css">
        html, body {
          height: 100%;
          margin: 0;
        }
        body {
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
          font-size: small;
          background: #fff;
        }
        #map {
          width: 100%;
          height: 100%;
        }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            (function () {
                window.onload = function () {
                    var options = {
                        zoom: 13,
                        center: new google.maps.LatLng(7.553697, 99.06302),
                        mapTypeId: google.maps.MapTypeId.SATELLITE
                    };
                    var map = new google.maps.Map(document.getElementById('map'), options);
                    var textBig = '20';
                    var textSmall = '14';

                    var locations = [
                      ['Ban Saladan', 7.651093922, 99.03995, 1, textBig],
                      ['Klong Dao', 7.63408027, 99.0269495, 1, textBig],
                      ['Phra Ae', 7.612178, 99.031062, 1, textBig],
                      ['Klong Khong', 7.574728, 99.033068, 1, textBig],
                      ['Klong Toab', 7.565497, 99.040943, 1, textBig],
                      ['Klong Nin', 7.538923, 99.048078, 1, textBig],
                      ['Klong Hin', 7.519017, 99.058989, 1, textBig],
                      ['Ba Kantiang Bay', 7.49551, 99.074525, 1, textBig],
                      ['Nui Bay', 7.488632, 99.079278, 1, textSmall],
                      ['Klong Jaak Bay', 7.486043, 99.083451, 1, textSmall],
                      ['Mai Phai Bay', 7.480503, 99.088885, 1, textSmall],
                      ['Ban Thung', 7.63694, 99.111174, 1, textSmall],
                      ['Ban Loh Yai', 7.609017, 99.123346, 1, textSmall]
                    ]

                    for (var i = 0; i < locations.length; i++) {
                        var location = locations[i];
                        var myLatLng = new google.maps.LatLng(location[1], location[2]);
                        var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: 'http://chart.googleapis.com/chart?chst=d_text_outline&chld=ffffff|' + location[4] + '|l|000000|b|' + location[0],
                            title: location[0],
                            zIndex: location[3]
                        });
                    }
                };
            })();
        </script>
    </head>
    <body>
      <div id="map"></div>
  </body>
</html>

0 个答案:

没有答案