图像mapster动态显示工具提示

我有一个图像地图，其中包含位置列表以及动态显示的每个位置的详细信息。目前，当您点击某个位置时，会在地图上弹出一个圆圈。我希望能够点击地图上的一个点，并显示一个工具提示，其中包含已经在html中的位置的详细信息。如何将工具提示绑定到页面上已存在的div上？而且当点击某个位置时，相应的工具提示会与圆圈一起显示在地图上。图像mapster动态显示工具提示

<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>

来源

2016-03-03 MG1

这是我的解决方案为止。它的工作原理，如果我将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 ] 
    });

来源

2016-03-04 15:35:15 MG1

图像mapster动态显示工具提示

回答

相关问题