Angular 4 Google Maps how to add description to marker

问题

I am using angular 4 and angular google maps.

I want to add marker with description like that:

Documentation for angular maps is really poor and I couldn't find anything like that.

I know how to add marker but only property it has is title but it is displayed when we move mouse over the marker. What can I do?

回答1:

The solution I found is not pretty at all but you won't have to use any external api, basically you use the label property to display the text and add some extra spaces in the beginning of the text because since the only properties available to the label are (color, fontFamily, fontSize, fontWeight, text) you can't add a style class to it

let  markerLabel = {
  text: this.stringWithSpaces('King's Cross',15),
  color: 'red'
}

stringWithSpaces(string, n){
  return Array(n).join('\xa0')+string
}

let marker = new google.maps.Marker({
  position: latLon,
  label: markerLabel,
  map: map,
  icon: {...}
});

I haven't done a lot of research on it but if you want you can try using this https://github.com/jesstelford/node-MarkerWithLabel

来源：https://stackoverflow.com/questions/48823925/angular-4-google-maps-how-to-add-description-to-marker