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信息直接粘贴到区域中，它可以工作，但它不适用于变量......任何想法为什么？

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

图像映射器动态显示工具提示

1 个答案: