Question

我在地图上绘制自定义标记，并根据该特定地址的人数添加标签。如果有超过5个我想写标签5+而不是写出23例如。 1 - 4工作得很好，但我似乎无法以显示的方式传递+。如果我可以帮助它，我不想使用带有数字的静态图像/标记。有人这么做过吗？

我试过这个：

var res_label = '5+' 
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: img,
label: encodeURIComponent(res_label),
animation: google.maps.Animation.DROP
});

针脚掉落但是空白。我尝试包装标记var，但也没用。

Answer 1

在网址+将用作空格时，您必须对其进行编码：%2B

你应该使用encodeURIComponent（）来编码整个字符串（可能有更多的字符必须编码）

window.onload = function() {
    document.body.firstChild.data = encodeURIComponent(document.body.firstChild.data);}

^1234567890ß´`?=)(/&%$§"!+*~ÄÖLK_:;-.,Q>%

样品的实现：

function initialize() {
  var goo = google.maps,
    map = new goo.Map(document.getElementById('map_canvas'), {
      zoom: 14,
      center: {
        lat: 0,
        lng: 0
      }
    }),
    //note:the dynamic chart-icons are deprecated and may be disabled som day
    url = 'https://chart.googleapis.com/chart?' +
    'chst=d_bubble_text_small&chld=',
    marker = new goo
    .Marker({
      map: map,
      position: map.getCenter(),
      icon: url +
        encodeURIComponent('bb|text|FFFFFF|000000')
    }),
    btn = document.createElement('input');
  btn.setAttribute('type', 'button');
  btn.setAttribute('value', 'push me!');
  map.controls[goo.ControlPosition.TOP_CENTER].push(btn);
  goo.event.addDomListener(btn, 'click', function() {
    var txt;
    if (txt = prompt('type a string', 'text')) {
      marker
        .setIcon(url + encodeURIComponent('bb|' + txt + '|FFFFFF|000000'))
    }
  })
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
input {
  background: tomato;
  font-size: 22px;
  border-color: tomato;
  border-radius: 8px;
  padding: 4px;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>

添加带有特殊字符+的标签

1 个答案:

样品的实现：