Gmap3 지우기

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 콜백 기능 대신 다음을 사용하십시오. CSS 또는 다른 코드 섹션에 필요한 경우를 대비하여 컨테이너 요소의 고유 ID를 연결하고 "googlemap"클래스를 그대로 둡니다. 하지만 한 가지 방향 집합 만 표시되도록하려면 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를 사용했지만이 플러그인을 사용하지 않았습니다.