Question

因此，我们的想法是更改标记的“icon”属性。我对javascript不是很好，所以它真的让我发疯。我所拥有的是一个地图，它标记了一个空白的标记（没有图纸），然后我在div的左边有一些选择。

我想要的是更改该特定实例的（标记）图标图形。

到目前为止，这是我的代码。我需要以某种方式附加一个监听器，根据我在地图之外的一些选项来改变这个图标图片。

<script type="text/javascript">
    var zind = google.maps.Marker.MAX_ZINDEX;

var $map;
var $latlng;
var overlay;
function initialize() {
    var $latlng = new google.maps.LatLng(<?php echo $model->lat; ?>, <?php echo $model->lon; ?>);

    var myOptions = {
        zoom: 16,
        center: $latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.TOP_LEFT },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_TOP
        },
        scaleControl: true,
        scaleControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControl: false,

        panControl:false

    };
    $map = new google.maps.Map(document.getElementById("map"),
    myOptions);

    var Vmarker = new google.maps.Marker({
        position: $latlng,
        title: 'Point A',
        map: $map,
        icon: '<?php echo Yii::app()->request->baseUrl; ?>/images/library/td_icons/map/ico_blanco.png',
        zIndex: 500,
        draggable: true

    });
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap($map);

我添加了这样的东西，我想改变Vmarker的图标属性，但我不知道应该怎么做？

 $(document).ready(function() {
    initialize();

    $("#ico_beer").click(function() {

        var icon = $(this).attr('src');
        google.maps.event.addListener(Vmarker, 'click', function() { 
            Vmarker.icon : icon;   

        });
    });

Answer 1

当用户点击图标div时，您是否想知道如何更改图标属性的代码？如果是这样，请试试此代码。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var zind = google.maps.Marker.MAX_ZINDEX;

      var map;
      var latlng;
      var overlay;
      var Vmarker;
      function initialize() {
        var latlng = new google.maps.LatLng(35, 138);

        var myOptions = {
          zoom : 16,
          center : latlng,
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          mapTypeControlOptions : {
            style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position : google.maps.ControlPosition.TOP_LEFT
          },
          zoomControl : true,
          zoomControlOptions : {
            style : google.maps.ZoomControlStyle.LARGE,
            position : google.maps.ControlPosition.LEFT_TOP
          },
          scaleControl : true,
          scaleControlOptions : {
            position : google.maps.ControlPosition.TOP_LEFT
          },
          streetViewControl : false,
          panControl : false

        };
        map = new google.maps.Map($("#map")[0], myOptions);

        Vmarker = new google.maps.Marker({
          position : latlng,
          title : 'Point A',
          map : map,
          icon : '',
          zIndex : 500,
          draggable : true
        });
        overlay = new google.maps.OverlayView();
        overlay.draw = function() {
        };
        overlay.setMap(map);
      }


      $(document).ready(function() {
        initialize();

        $(".icons").click(function() {
            var icon = $(this).find("img").attr('src');
            Vmarker.setIcon(icon);
        });
      });
    </script>
    <style type="text/css">
      #map {
        width: 75%;
        height: 100%;
        position : absolute;
        left : 0;
        top : 0;
      }

      .icons {
        border : 1px solid #ccc;
        width : 100%;
        height : 40px;
        line-height : 40px;
        overflow : hidden;
        cursor : pointer;
      }
      #bar {
        position : absolute;
        right : 0;
        top : 0;
        width : 25%;
        height : 100%;
      }
      #frame {
        position : relative;
        width : 500px;
        height : 300px;
      }
    </style>

  </head>
  <body>
    <div id="frame">
      <div id="map"></div>
      <div id="bar">
        <div class='icons'><img src="beergarden.png">Beer Garden!</div>
        <div class='icons'><img src="fastfood.png">FastFood</div>
      </div>
    </div>
  </body>
</html>

enter image description here

当用户点击外面的图像时尝试更改标记图标

1 个答案: