3

別のマーカーがクリックされたとき、または原点マーカーが別の場所にドラッグされたときに、方向を再計算する必要があります。

現時点では、ユーザーが自分の住所を挿入するときにマーカーを挿入し、ユーザーが既存のマーカーをクリックすると、方向が計算されます。残念ながら、以前の指示はクリアされません。

どんな助けでも大歓迎です。

コードは次のとおりです。

jQuery(document).ready(function() {
jQuery.getJSON('./index.php', {
 option: "com_locate",
 view: "branches",
 tmpl: "component",
 format: "json",
},
 function(json){
      jQuery(function(){      
    jQuery("#googleMap").gmap3({
      map:{
        options: {
          center:[-29.8191,25.3499],
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          streetViewControl: false
        }
      },
      marker: {
        values: json,
        options: {
          icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png")
        },
        events:{
          mouseover: function(marker, event, context){
            jQuery(this).gmap3(
              {clear:"overlay"},
              {
              overlay:{
                id: "tooltip",
                latLng: marker.getPosition(),
                options:{
                  content:  "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
                              "<div class='bg'></div>" +
                              "<div class='text'>" + context.data.city + " (" + context.data.telephone + ")</div>" +
                            "</div>" +
                            "<div class='arrow'></div>",
                  offset: {
                    x:-46,
                    y:-73
                  }
                }
              }
            });
          },
          mouseout: function(){
            jQuery(this).gmap3({clear:"overlay"});
          },

          click: function(marker, event, context){
              markerSelected(context.id);
            }
           }
        }
    });
    ///////////////
    jQuery('#test-ok').click(function(){
      var addr = jQuery('#test-address').val();
      if ( !addr || !addr.length ) return;
      jQuery("#googleMap").gmap3({
        getlatlng:{
          address:  addr,
          callback: function(results){
            if ( !results ) return;
            jQuery("#googleMap").gmap3({
                clear:{id:"user"}
                },
                {
              marker:{
                latLng:results[0].geometry.location,
                id:"user",
                name:"user",
                options:{
                  draggable: true
                }
              },
                map:{
                  center: true,
                  zoom: 5
              }
            });
          }
        }
      });
    });

    jQuery('#test-address').keypress(function(e){
      if (e.keyCode == 13){
        jQuery('#test-ok').click();
      }
    });

    ///////////////
    ///////////////
    function markerSelected(id){
    var marker = jQuery('#googleMap').gmap3({get:id});
    var usermarker = jQuery('#googleMap').gmap3({get:"user"});
    jQuery("#googleMap").gmap3({
      getroute:{
        options:{
            origin:[usermarker.getPosition().lat(),usermarker.getPosition().lng()],
            destination:[marker.getPosition().lat(),marker.getPosition().lng()],
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        callback: function(results){
          if (!results) return;
          jQuery(this).gmap3({
            map:{
              options:{
              }
            },
            directionsrenderer:{
              container: jQuery(document.createElement("div")).addClass("googlemap").insertAfter(jQuery("#googleMap")),
              options:{
                directions:results
              }
            }
          });
        }
      }
    });

  } 
  });
  });
  });
4

1 に答える 1

0

使用しているコードは、既存のそのような要素を削除したり、既存の要素のコンテンツを置き換えたりすることなく、ルート リクエストを行うたびに新しい DOM 要素を作成します。コードの関連部分は次のとおりです。

    directionsrenderer:{
      container: jQuery(document.createElement("div")).addClass("googlemap").insertAfter(jQuery("#googleMap")),
        // The above creates a new DOM element every time markerSelected() is called!
      options:{
        directions:results
      }
    }

一度だけ作成したい。必要に応じて、HTML マークアップで直接行うことができます。

getroute コールバック関数の代わりに以下を使用してください。コンテナー要素の一意の ID をプラグインし、CSS またはコードの他のセクションで必要な場合に備えて、「googlemap」クラスをそのまま残しました。ただし、具体的にはルートの 1 つのセットのみを表示する必要があるため、コンテナーを ID で選択しましょう。

callback: function(results){
  if (!results) return;
  if (!jQuery("#dircontainer").length>0) {
    jQuery("<div id='dircontainer' class='googlemap'></div>").insertAfter("#googleMap");
  } // Creates your directions container if it doesn't already exist.
  else {
    jQuery("#dircontainer").html("");
  } /* I'm clearing the existing contents of the container in case gmap3 doesn't
       automatically clear it when the new directions are inserted.
       You can experiment with removing this else statement. */
  jQuery(this).gmap3({
    map:{
      options:{
      }
    },
    directionsrenderer:{
      container: jQuery("#dircontainer"),
      options:{
        directions:results
      }
    }
  });
}

ここでは、gmap3 プラグインの動作についていくつかの仮定を立てています。jQuery と Google Maps JS API を使用しましたが、このプラグインは使用しませんでした。

于 2012-11-28T14:56:38.000 に答える