我遵循了一些指南,但标签没有显示在我的地图上。 我用Ionic。 这是我的代码(在地图控制器中):
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;
}
在地图上正确查看了标记,但它没有显示其标签..
答案 0 :(得分:1)
代码看起来像MarkerWithLabel
- 库的样本。
您必须包含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>