Question

我写了一个用于在屏幕上显示标记的代码。我在标记内有一个文本。文本是一个5位数字，不适合标记。如何使数字在标记内？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Add Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
    width: 1024px;
    height: 740px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(47.576897,-122.419184),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var locations = [

[47.648197,-122.282784,11500,"0"]

    ];
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        var shape = {
      coord: [10, 10, 10, 20, 18, 20, 18 , 10],
      type: 'poly'
  };


        for (i = 0; i < locations.length; i++) { 

          var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
          pinIcon = new google.maps.MarkerImage(
    'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+locations[i][2]+'|808000|0000FF',
    null, 
    null, 
    new google.maps.Point(140, 210),
    new google.maps.Size(40, 60)
    );       
          var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon:pinIcon,
            shape:shape,
            title: locations[i][3]



        });
        }


      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

我想在我的标记内打印“11500”（位置[i] [2]）但是在尝试这样做时它会超出标记。

Answer 1

主要问题是您使用的是图表api中错误的图标。引脚类型当然不能满足您显示文本的需要;并且在请求之后无法对其进行缩放（因为您似乎在尝试使用代码），因为您将随文本一起缩放图标。

所以要改变两件事：

MarkerIcon已被弃用，幸运的是，它很容易切换到Icon。
使用专为显示文字而设计的其他标记类型。 Bubbles，可能。

以下是我刚刚测试过的相关代码块：

var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var pinIcon = {
    url: 'http://chart.apis.google.com/chart?chst=d_bubble_text_small&chld=bb|'+locations[i][2]+'|C6EF8C|000000'
};
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: pinIcon,
    title: locations[i][3]
});

我删除了shape属性，因为无论如何它都不再适用于新图标。在缩放过程中会有一些图像偏移，如果您愿意，可以使用属性来修复它。最后，在该链接上有不同的样式来定制。

注意：如果要长时间使用它，请知道图表api也已弃用，我认为它要到2015年。

如何使文字适合谷歌标记？

1 个答案: