0

したがって、アイデアは、マーカーの「アイコン」プロパティを変更することです。私は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;   

        });
    });
4

1 に答える 1

2

ユーザーがアイコン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>

ここに画像の説明を入力してくださいここに画像の説明を入力してください

于 2012-11-27T21:46:30.227 に答える