Javascript Gmap3明确指示

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

目前，当用户插入其地址时，我正在插入一个标记，然后当用户单击任何现有标记时，它会计算方向。不幸的是，它没有清除前面的方向

任何帮助都将不胜感激

代码如下：

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

  } 
  });
  });
  });

jQuery（文档）.ready（函数（）{
jQuery.getJSON（'./index.php'{
选项：“com_locate”，
视图：“分支”，
tmpl：“组件”，
格式：“json”，
},
函数（json）{
jQuery（函数（）{
jQuery（“谷歌地图”）.gmap3({
地图：{
选项：{
中心：[-29.8191,25.3499]，
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误
}
},
标记：{
值：json，
选项：{
图标：新建google.maps.MarkerImage（“http://maps.gstatic.com/mapfiles/icon_green.png")
},
活动：{
mouseover：函数（标记、事件、上下文）{
jQuery（this）.gmap3(
{清除：“覆盖”}，
{
覆盖：{
id:“工具提示”，
latLng:marker.getPosition（），
选项：{
内容：“”+
"" +
“+context.data.city+”（“+context.data.telephone+”）+
"" +
"",
偏移量：{
x:-46，
y:-73
}
}
}
});
},
mouseout:function（）{
gmap3（{clear:“overlay”}）；
},
单击：功能（标记、事件、上下文）{
markerSelected（context.id）；
}
}
}
});
///////////////
jQuery（“#测试确定”）。单击（函数（）{
var addr=jQuery（“#测试地址”）.val（）；
如果（！addr | |！addr.length）返回；
jQuery（“谷歌地图”）.gmap3({
getlatlng：{
地址：地址：，
回调：函数（结果）{
如果（！results）返回；
jQuery（“谷歌地图”）.gmap3({
清除：{id:“用户”}
},
{
标记：{
latLng:结果[0]。几何体。位置，
id:“用户”，
名称：“用户”，
选项：{
德拉格布尔：是的
}
},
地图：{
中：是的，
缩放：5
}
});
}
}
});
});
jQuery（“#测试地址”）.keypress（函数（e）{
如果（e.keyCode==13）{
jQuery（“#测试确定”）。单击（）；
}
});
///////////////
///////////////
函数标记已选择（id）{
var marker=jQuery（'#googleMap'）.gmap3（{get:id}）；
var usermarker=jQuery（'#googleMap'）.gmap3（{get:“user”}）；
jQuery（“谷歌地图”）.gmap3({
获取路线：{
选项：{
原点：[usermarker.getPosition（）.lat（），usermarker.getPosition（）.lng（）]，
目标：[marker.getPosition（）.lat（），marker.getPosition（）.lng（）]，
travelMode:google.maps.Directions travelMode.DRIVING
},
回调：函数（结果）{
如果（！results）返回；
jQuery（this）.gmap3({
地图：{
选项：{
}
},
方向渲染器：{
容器：jQuery（document.createElement（“div”））.addClass（“googlemap”）.insertAfter（jQuery（“googlemap”）），
选项：{
方向：结果
}
}
});
}
}
});
} 
});
});
});

每次执行方向请求时，您使用的代码都会创建一个新的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回调函数。我为container元素插入了一个惟一的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
      }
    }
  });
}

回调：函数（结果）{ 如果（！results）返回； 如果（！jQuery（“#dircontainer”）.length>0）{ jQuery（“”.insertAfter（#googleMap））； }//如果您的方向容器尚不存在，则创建该容器。 否则{ jQuery（“#dircontainer”）.html（“”）； }/*我正在清除容器中的现有内容，以防gmap3无法清除 插入新方向时自动将其清除。 您可以尝试删除此else语句*/ jQuery（this）.gmap3({ 地图：{ 选项：{ } }, 方向渲染器：{ 容器：jQuery（“#dircontainer”）， 选项：{ 方向：结果 } } }); } 我在这里对gmap3插件的工作方式做一些假设；我使用过jQuery和GoogleMapsJSAPI，但没有使用这个插件