Question

="" i am practicing on java script,

i have 3 "a" tags and one div in my page.I want to load different java script file(which is for loading google map) in div on each "a" click, this is my html page

<body>
<li><a href="#" >india</a></li>
<li><a href="#" >bangladesh</a></li>
<li><a href="#" >UAE</a></li>


<div id="loader"></div>

how can i load different javascript on each "a" click without page refresh

Answer 1

您好请尝试以下代码希望您正在寻找此

    jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
    e.preventDefault();
    var latLng = jQuery(this).attr("data-latLng");          
    initialize(latLng);
    });

    function initialize(latLng) {
    latLng = latLng.split(",")
    var mapOptions = {
        center: new google.maps.LatLng(latLng[0],latLng[1]),
        zoom: 8
     };
    var map = new google.maps.Map(document.getElementById("map- 
    canvas"),  mapOptions);
     }
     });

和html

<a href="#" class="button" data-latLng="20.593684,78.962880">India</a>
<a href="#" class="button" data-latLng="23.684994,   
90.356331">Bangladesh</a>
<a href="#" class="button" data-latLng="23.424076,53.847818">UAE</a>

请参阅下面的小提琴，了解详情

Div map Load Fiddle

Answer 2

使用gmap3并添加您所在位置的纬度和经度的数据属性，如下所示

<a href="javascript:void(0)" data-Latitude="22.5773626" data-Longitude="79.5222058">india</a>

然后在你的jquery一边写这个脚本

  $(document).on('click', 'a', function () {
      var latitude = $(this).attr("data-Latitude");
      var longitude = $(this).attr("data-Longitude");
      $('#loader').gmap3('destroy');
      $('#loader')
          .gmap3({
           center:[latitude , longitude ],
           zoom:4
       })
       .marker([{position:[latitude , longitude ]}                
      ])      
    });

在<a tag="" click=""

2 个答案: