在點擊事件中創建SVG標記

Now that I can actually create an SVG marker這裏是我的願景：用戶點擊地圖，點擊觸發Ajax查詢，從遠程服務器獲取「長度」和「角度」值，並使用這些值點擊繪製給定長度和角度的SVG箭頭。在點擊事件中創建SVG標記

Ajax部分很簡單，一旦我有了長度和角度，我就可以找出箭頭的SVG語法。現在，我試圖創建「點擊並創建一個隨機箭頭」。下面的代碼有點作品。在「上一次」單擊中創建箭頭。也就是說，當我點擊第1點時，沒有任何反應。然後，當我點擊第2點時，在點1創建一個箭頭，對於點（n-1），等等，其中n是第n點擊。

<head> 
<style type="text/css"> 
.quiver {width: 50px; height: 50px;} 
</style> 

<script type="text/javascript"> 
     var map; 

     function div() { 
      var m = document.createElement('DIV'); 
      m.innerHTML = '<div class="quiver"></div>'; 
      return m; 
     } 

     function init() { 
      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: new google.maps.LatLng(43, -89), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      google.maps.event.addListener(map, "click", function (event) { 
       var marker = new RichMarker({ 
        map: map, 
        position: event.latLng, 
        draggable: true, 
        flat: true, 
        anchor: RichMarkerPosition.MIDDLE, 
        content: div() 
       }); 

       $('.quiver').svg({ 
        onLoad: function(svg) { 
         svg.line(
          Math.random()*49, Math.random()*49, Math.random()*49, Math.random()*49, 
          {stroke: 'black', strokeWidth: 2} 
         ); 
        } 
       }); 
      }); 

      /* 
      google.maps.event.addListenerOnce(map, 'idle', function() { 
       $('.quiver').svg({onLoad: drawArrow}); 
      }); 
      */ 
     } 

     google.maps.event.addDomListener(window, 'load', init); 
</script> 
</head>

來源

2011-09-18 punkish

的這裏的問題是類似的previous question。當您致電

$('.quiver').svg({ 
    onLoad: function(svg) { 
     ... 
    } 
});

在click事件偵聽器中，正在創建的標記尚未附加到DOM節點樹。尼斯閱讀關於JavaScript中的同步和計時here。

由於jQuery $('.quiver')命令選擇了所有具有顫動類的元素（即n-1個元素，第n個元素不存在於DOM節點樹中）並且僅限於第（n-1）第（n-1）行適用於svg代碼。

不幸的是，地圖的idle事件（或Google Maps API v3中的任何其他事件）不會對此情況有所幫助。

我想有2個解決問題的辦法：

一種解決方案是用jQuery創建的HTML元素直接在click事件偵聽目標。

$(marker.content).find('.quiver').svg({ 
     onLoad: function(svg) { 
      svg.line(
       Math.random()*49, Math.random()*49, 
       Math.random()*49, Math.random()*49, 
       {stroke: 'black', strokeWidth: 2} 
     ); 
     } 
});

第二種解決方案不使用jQuery SVG插件，而是直接在div()函數創建SVG。

function div() { 
    var m = document.createElement('DIV'); 
    m.innerHTML = '<div class="quiver"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">' + 
        '<line x1="' + Math.random()*49 + '" y1="' + Math.random()*49 + '" ' + 
        'x2="' + Math.random()*49 + '" y2="' + Math.random()*49 + '" style="stroke:rgb(0,0,0);stroke-width:2"/></svg></div>'; 
    return m; 
}

並刪除click事件偵聽器中的jQuery $('.quiver').svg(...);命令。

來源

2011-09-19 01:16:44 Tomik

謝謝。我很希望通過jquery.svg來隱藏SVG的複雜性，但是，您的建議2似乎現在對我來說效率最高。我相信上面的建議1會在html div中找到* all *標記並繪製它們，而不是像其他選項那樣高效。 – punkish

第一個建議僅針對新創建的標記。 $（marker.content）僅將jQuery應用於marker.content中的html元素（儘管marker.content可能尚未附加到文檔中）。由於marker.content中只有兩個div，它應該和第二個建議幾乎一樣有效。 – Tomik

在點擊事件中創建SVG標記

回答

相關問題