圖像mapster動態顯示工具提示

Question

我有一個圖像地圖，其中包含位置列表以及動態顯示的每個位置的詳細信息。目前，當您點擊某個位置時，會在地圖上彈出一個圓圈。我希望能夠點擊地圖上的一個點，並顯示一個工具提示，其中包含已經在html中的位置的詳細信息。如何將工具提示綁定到頁面上已存在的div上？而且當點擊某個位置時，相應的工具提示會與圓圈一起顯示在地圖上。

<ul id="boundList"> 
      <li id="nid-854" state="seoul-korea" class=""> 
    <div class="views-field views-field-title">  <span class="field-content">Seoul, Korea</span> </div></li> 
      <li id="nid-852" state="tokyo-japan" class="selected"> 
    <div class="views-field views-field-title">  <span class="field-content">Tokyo, Japan</span> </div></li> 
      <li id="nid-855" state="chennai-india"> 
    <div class="views-field views-field-title">  <span class="field-content">Chennai, India</span> </div></li> 
      <li id="nid-848" state="limburg-germany"> 
    <div class="views-field views-field-title">  <span class="field-content">Limburg, Germany</span> </div></li> 
      <li id="nid-849" state="shanghai-china"> 
    <div class="views-field views-field-title">  <span class="field-content">Shanghai, China</span> </div></li> 
      <li id="nid-859" state="huangshan-china"> 
    <div class="views-field views-field-title">  <span class="field-content">Huangshan, China</span> </div></li> 
      <li id="nid-851" state="sorocaba-brazil"> 
    <div class="views-field views-field-title">  <span class="field-content">Sorocaba, Brazil</span> </div></li> 
</ul> 

詳情：

<div id="nid-852-content" class="row content active"> 
      <h3>Tokyo, Japan</h3>  
      <h5>Support |&nbsp;Sales</h5> .... there's more info 
</div> 

這裏是我的地圖：

<p><img id="locations-map" src="/images/website_map_.jpeg"/usemap="#locations"></p> 
<map name="locations"> 
<area state="yucca-az" toolTip="" shape="circle" coords="178,211,15" href="#nid-857"> 
    <area state="wittmann-az" shape="circle" coords="190,230,15" href="#nid-846"> 
    <area state="torrence-ca" shape="circle" coords="159,228,15" href="#nid-858"> 
    <area state="sorocaba-brazil" shape="circle" coords="385,439,15" href="#nid-851"> 
    <area state="huangshan-china" shape="circle" coords="915,244,15" href="#nid-859"> 
    <area state="limburg-germany" shape="circle" coords="568,167,15" href="#nid-848"> 
    <area state="tokyo-japan" shape="circle" coords="974,225,15" href="#nid-852"> 
    <area state="chennai-india" shape="circle" coords="794,307,15" href="#nid-855"> 
    <area state="shanghai-china" shape="circle" coords="930,237,15" href="#nid-849"> 
    <area state="canton-mi" shape="circle" coords="287,184,9" href="#nid-856"> 
    <area state="seoul-korea" shape="circle" coords="948,212,15" href="#nid-854"> 

而且JS：

jQuery('#locations-map').mapster({ 
     fillColor: 'efc254', 
     fillOpacity: 1, 
     stroke: true, 
     strokeColor: '03325e', 
     strokeWidth: 2, 
     singleSelect: true, 
     mapKey: 'state', 
     boundList: jQuery('#boundList').find('li'), 
     listKey: 'state', 
     listSelectedClass: 'selected', 
     showToolTip: true, 
     areas: [{'key': ''}, 
       {'tooltip', ''}] 
    }); 
</map> 

Answer 1

這是我的解決方案爲止。它的工作原理，如果我將console.log信息直接粘貼到區域中，但不是rk與變量...任何想法爲什麼？

jQuery(".section-locations section .view-content .row").each(function() { 
    var state = jQuery(this).attr('state'); 
    var stateContents = jQuery(this).find('h3').html(); 

    var areas = '{"key":"'+ state + '", "toolTip":"' + stateContents +'"},'; 

    areasContainer += areas; 


}); console.log(areasContainer); 



jQuery('#locations-map').mapster({ 
     fillColor: 'efc254', 
     fillOpacity: 1, 
     stroke: true, 
     strokeColor: '03325e', 
     strokeWidth: 2, 
     singleSelect: true, 
     mapKey: 'state', 
     boundList: jQuery('#boundList').find('li'), 
     listKey: 'state', 
     listSelectedClass: 'selected', 
     showToolTip: true, 

     areas: [ areasContainer ] 
    });