【问题标题】:Label on Marker doesn't work标记上的标签不起作用
【发布时间】:2015-07-18 11:50:11
【问题描述】:

我遵循了一些指南,但我的地图上没有显示标签。 我用离子。 这是我的代码(在地图控制器中):

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;
}

标记在地图上已正确查看,但未显示其标签..

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 maps google-maps-markers


    【解决方案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>

    【讨论】:

    • 谢谢!完美运行! :)
    • 对不起,我可以使用更多不同宽度的标签并将其居中到标记吗?
    • 还有其他问题..点击更多标记不起作用..我用这个添加它:google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { $scope.setInfoWindow(data[i].id); } })(marker, i));
    • 我不熟悉 ionic/angularjs。请根据您当前的实现创建一个小提琴,我会看看。
    • 我不认为这是 angularjs 的问题。使用您的代码,标签点击有效,但标记点击无效。我很快就会做一个小提琴。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-08
    • 1970-01-01
    • 1970-01-01
    • 2013-05-11
    • 2021-09-29
    • 1970-01-01
    • 2017-01-13
    相关资源
    最近更新 更多