Question

当点击另一个标记或将我的原点标记拖动到另一个位置时，我需要重新计算方向。

目前，我在用户插入他/她的地址时插入标记，然后当用户点击任何现有标记时计算方向。不幸的是，它并没有明确以前的指示。

任何帮助都将不胜感激。

以下是代码：

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

  } 
  });
  });
  });

Answer 1

您每次执行路线请求时，您使用的代码都会创建一个新的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，并保留了“googlemap”类，以防CSS或其他代码段需要。但是，由于您只需要一组方向可见，我们按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，但没有使用这个插件。

Gmap3明确方向

1 个答案: