Question

我正在尝试更改标记样式的标题

这是我正在构建和传递的HTML

但它没有应用风格

请你们知道如何解决这个问题

function createMarker(latlng, html) {

      var  tooltiponclcik = 'Company Name :  1  , <br> ' + 'Sales Off Name :  2  , <br>' + 'Warehouse Name :  3 ';     



    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title:tooltiponclcik
    });


    markerArray.push(marker); //push local var marker into global array
}

这是我的小提琴

http://jsfiddle.net/6wp7enot/16/

Answer 1

标记的title属性用于创建翻转文本。该文本无法使用HTML格式标签设置样式（它只能是直接文本）。

如果您想创建格式化文本，可以在鼠标悬停时显示，但您需要自己编写代码。

proof of concept fiddle，使用我的回答中的代码：title of a marker of google map marker API

代码段

function createMarker(latlng, html) {

  var tooltiponclcik = 'Company Name :  1  , <br> ' + 'Sales Off Name :  2  , <br>' + 'Warehouse Name :  3 ';



  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5,
    tooltip: tooltiponclcik
  });
  var tooltip = new Tooltip({
    map: map
  }, marker);
  tooltip.bindTo("text", marker, "tooltip");
  google.maps.event.addListener(marker, 'mouseover', function() {
    tooltip.addTip();
    tooltip.getPos2(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    tooltip.removeTip();
  });

  markerArray.push(marker); //push local var marker into global array
}


var geocoder;
var map;
var markerArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var normalMarker = new google.maps.Marker({
    position: {
      lat: 37.43,
      lng: -122.14
    },
    title: "normal tooltip",
    map: map
  });
  // from https://stackoverflow.com/questions/19279199/title-of-a-marker-of-google-map-marker-api/
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(37.442, -122.142),
    map: map,
    tooltip: '<B>This is a customized tooltip</B>'
  });

  var tooltip = new Tooltip({
    map: map
  }, marker);
  tooltip.bindTo("text", marker, "tooltip");
  google.maps.event.addListener(marker, 'mouseover', function() {
    tooltip.addTip();
    tooltip.getPos2(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    tooltip.removeTip();
  });

  //your code
  createMarker(new google.maps.LatLng(37.45, -122.162), "stuff for infowindow");

}
google.maps.event.addDomListener(window, "load", initialize);

// The custom tooltip class

// Constructor function
function Tooltip(opts, marker) {

  // Initialization
  this.setValues(opts);
  this.map_ = opts.map;
  this.marker_ = marker;
  var div = this.div_ = document.createElement("div");
  // Class name of div element to style it via CSS
  div.className = "tooltip";
  this.markerDragging = false;
}


Tooltip.prototype = {

  // Define draw method to keep OverlayView happy
  draw: function() {},

  visible_changed: function() {
    var vis = this.get("visible");
    this.div_.style.visibility = vis ? "visible" : "hidden";
  },

  getPos: function(e) {
    var projection = this.getProjection();
    // Position of mouse cursor
    var pixel = projection.fromLatLngToDivPixel(e.latLng);
    var div = this.div_;

    // Adjust the tooltip's position
    var gap = 15;
    var posX = pixel.x + gap;
    var posY = pixel.y + gap;

    var menuwidth = div.offsetWidth;
    // Right boundary of the map
    var boundsNE = this.map_.getBounds().getNorthEast();
    boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

    if (menuwidth + posX > boundsNE.pixel.x) {
      posX -= menuwidth + gap;
    }
    div.style.left = posX + "px";
    div.style.top = posY + "px";

    if (!this.markerDragging) {
      this.set("visible", true);
    }
  },

  getPos2: function(latLng) { // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
    var projection = this.getProjection();
    // Position of mouse cursor
    var pixel = projection.fromLatLngToDivPixel(latLng);
    var div = this.div_;

    // Adjust the tooltip's position
    var gap = 5;
    var posX = pixel.x + gap;
    var posY = pixel.y + gap;

    var menuwidth = div.offsetWidth;
    // Right boundary of the map
    var boundsNE = this.map_.getBounds().getNorthEast();
    boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

    if (menuwidth + posX > boundsNE.pixel.x) {
      posX -= menuwidth + gap;
    }
    div.style.left = posX + "px";
    div.style.top = posY + "px";

    if (!this.markerDragging) {
      this.set("visible", true);
    }
  },

  addTip: function() {
    var me = this;
    var g = google.maps.event;
    var div = me.div_;
    div.innerHTML = me.get("text").toString();
    // Tooltip is initially hidden
    me.set("visible", false);
    // Append the tooltip's div to the floatPane
    me.getPanes().floatPane.appendChild(this.div_);

    // In IE this listener gets randomly lost after it's been cleared once.
    // So keep it out of the listeners array.
    g.addListener(me.marker_, "dragend", function() {
      me.markerDragging = false;
    });

    // Register listeners
    me.listeners = [
      //   g.addListener(me.marker_, "dragend", function() {
      //    me.markerDragging = false; }),	
      g.addListener(me.marker_, "position_changed", function() {
        me.markerDragging = true;
        me.set("visible", false);
      }),
      g.addListener(me.map_, "mousemove", function(e) {
        me.getPos(e);
      })
    ];
  },

  removeTip: function() {
    // Clear the listeners to stop events when not needed.
    if (this.listeners) {
      for (var i = 0, listener; listener = this.listeners[i]; i++) {
        google.maps.event.removeListener(listener);
      }
      delete this.listeners;
    }
    // Remove the tooltip from the map pane.
    var parent = this.div_.parentNode;
    if (parent) parent.removeChild(this.div_);
  }
};


function inherit(addTo, getFrom) {

  var from = getFrom.prototype; // prototype object to get methods from
  var to = addTo.prototype; // prototype object to add methods to
  for (var prop in from) {
    if (typeof to[prop] == "undefined") to[prop] = from[prop];
  }
}

// Inherits from OverlayView from the Google Maps API
inherit(Tooltip, google.maps.OverlayView);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
.tooltip {
  position: absolute;
  width: 145px;
  padding: 5px;
  border: 1px solid gray;
  font-size: 9pt;
  font-family: Verdana;
  background-color: #fff;
  color: #000;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Answer 2

$(document).ready(function () {
    var a = 10.109240;
    var b = 76.354261;
    var c = '<div style="font-weight: 500;"><dd style="color: #2196F3;">change text color  <i class="fa fa-map-marker"></i></dd><dd style="color: red;">change text color  <i class="fa fa-check"></i></dd></div>';
    var map;
    var host = window.location.origin;
    var host0 = window.location.hostname;
    var host1 = window.location.pathname;   
    var icon = "/images/map-icon.png";
    map = new google.maps.Map(document.getElementById('map_canvas'),{
        center: { lat: a, lng: b },
        zoom: 8,
        icon : icon
    });
    var infowindow = new google.maps.InfoWindow();
    var latLng = new google.maps.LatLng(a, b);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: icon,
        title: c
    });
    infowindow.setContent(c);
    infowindow.open(map, marker);
});

[我的作品] [1] [1]：https://i.stack.imgur.com/BlSuP.png

无法更改标记的标题样式

2 个答案: