標記上的標籤不起作用

Question

我已遵循一些指南，但標籤未顯示在我的地圖上。 我使用離子。 這是我的代碼（在地圖控制器）：

var myLatLng = new google.maps.LatLng(lat,lon); 
    var stylesMap = [ 
     { 
      featureType: "poi", 
      elementType: "labels", 
      stylers: [ 
       { visibility: "off" } 
      ] 
     } 
    ]; 
    var myOptions = { 
     zoom: 15, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: false, 
     mapTypeControl:false, 
     styles: stylesMap 
    }; 
    var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     labelContent: "$425K", 
     labelAnchor: new google.maps.Point(22, 0), 
     labelClass: "labels", // the CSS class for the label 
     zIndex: 10000, 
     icon: "img/marker/tuseiqui.png" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    }); 

這是CSS：

.labels { 
color: red; 
background-color: white; 
font-family: "Lucida Grande", "Arial", sans-serif; 
font-size: 10px; 
font-weight: bold; 
text-align: center; 
width: 40px;  
border: 2px solid black; 
white-space: nowrap; 
} 

標記正確觀看在地圖上，但它並沒有顯示其標籤..

Answer 1

該代碼看起來像是MarkerWithLabel -library的示例。

必須包括library，並創建一個new MarkerWithLabel而不是new google.maps.Marker

var myLatLng = new google.maps.LatLng(0, 0); 
 
var stylesMap = [{ 
 
    featureType: "poi", 
 
    elementType: "labels", 
 
    stylers: [{ 
 
    visibility: "off" 
 
    }] 
 
}]; 
 
var myOptions = { 
 
    zoom: 15, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    streetViewControl: false, 
 
    mapTypeControl: false, 
 
    styles: stylesMap 
 
}; 
 
var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions); 
 
var marker = new MarkerWithLabel({ 
 
    position: myLatLng, 
 
    map: map, 
 
    labelContent: "$425K", 
 
    labelAnchor: new google.maps.Point(22, 0), 
 
    labelClass: "labels", // the CSS class for the label 
 
    zIndex: 10000 
 
    //,icon: "img/marker/tuseiqui.png" 
 
}); 
 
google.maps.event.addListener(marker, 'click', function() {});

html, 
 
body, 
 
#gmaps-canvas { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.labels { 
 
    color: red; 
 
    background-color: white; 
 
    font-family: "Lucida Grande", "Arial", sans-serif; 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 40px; 
 
    border: 2px solid black; 
 
    white-space: nowrap; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script> 
 
<div id="gmaps-canvas"></div>