如何在地圖上顯示鼠標移至div列時的位置

我有一個頁面，其中左側信息來自數據庫，如商戶名稱，其詳細信息，地址。和右側我有一個地圖顯示從數據庫中取得的地址標記。現在我想在地圖上顯示標記時，鼠標懸停在左側信息上，地址存儲在數據庫中。如何在地圖上顯示鼠標移至div列時的位置

2013-10-18 user2732629

其API [Rü用來顯示地圖？谷歌地圖？ – Ashish

@Ashish：是的，我已經使用谷歌地圖 – user2732629

通過這將有助於你：http://stackoverflow.com/questions/6049636/change-icon-of-google-map-marker-when-onmouseover-div-google -maps-v3-api – Ashish

你可以做的，

對於v3

//start of loop for creating markers 
markersArray[param._id] = r; // param._id will be some unique id of your result set 
google.maps.event.addListener(r, 'click', function() { 
    param._infowindow.close(); // close infowindow 
    load_content(map,this,param._infowindow,param._id); // function to load the content from database 
}); 
// end of loop 
function load_content(map,marker,infowindow,id) 
{ 
    return $.ajax({ 
     type: "POST", 
     url: "yourscript.php", 
     data:{ 
      'id':id 
     }, 
     success: function(data){// function to be called if the request succeeds 
      infowindow.setContent(data); //set the contents on infowindow 
      infowindow.setOptions({ 
       position: marker.getPosition() 
      }); 
      infowindow.open(map, marker); 
     } 
    }); 
} 
function infoOpen(id) // id of the result 
{ 
    google.maps.event.trigger(markersArray[id],'click'); // triggers click event of marker 
}

HTML

<div onclick="infoOpen('<?= $result_id ?>', '1');">$address1</div><!-- $result_id is id of each result--> 
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address2</div><!-- $result_id is id of each result--> 
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address3</div><!-- $result_id is id of each result--> 
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address4</div><!-- $result_id is id of each result-->

下面是一個例子

<html> 
    <head> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script> 
     <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
     <script> 
      function infoOpen(i) 
      { 

       google.maps.event.trigger(gmarkers[i], 'click'); 
      } 
      var gmarkers = []; 
      var markers = []; 
      markers = [ 
       ['0', 'Marker 1', 13.988719, 100.617909], 
       ['1', 'Marker 2', 13.662811, 100.43758], 
       ['2', 'Marker 3', 13.744961, 100.535073], 
       ['3','Marker 4', 13.801981, 100.613864], 
       ['4', 'Marker 5', 13.767507, 100.644024]]; 

      $(document).ready(function() { 
       var myOptions = { 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: false 
       }; 

       var map = new google.maps.Map(document.getElementById("map"), myOptions); 
       var image = new google.maps.MarkerImage('img/marker.png', 
       new google.maps.Size(65, 32), 
       new google.maps.Point(0, 0), 
       new google.maps.Point(18, 42)); 
       var infowindow = new google.maps.InfoWindow(); 
       var marker, i; 
       var bounds = new google.maps.LatLngBounds(); 

       for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
        var content = markers[i][1]; 
        bounds.extend(pos); 
        marker = new google.maps.Marker({ 
         position: pos, 
         map: map 
        }); 
        gmarkers.push(marker); 
        google.maps.event.addListener(marker, 'click', (function(marker, content) { 
         return function() { 
          infowindow.setContent(content); 
          infowindow.open(map, marker); 
         } 
        })(marker, content)); 
       } 


       map.fitBounds(bounds); 
      }); 
     </script> 
     <style> 
      body { 
       text-align: center 
      } 
      #map { 
       width:640px; 
       height: 480px; 
       border:6px solid #6f5f5e; 
       margin:20px auto 30px auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <a href="javascript:void(0);" onclick="infoOpen('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a> 

      <div id="map">&nbsp;</div> 
     </div> 
    </body> 
</html>

來源

2013-10-18 09:14:47

我試圖通過合併它與我的代碼，但地圖不來。 – user2732629

謝謝這是我的代碼錯誤，thanx你的幫助。 – user2732629

如何在地圖上顯示鼠標移至div列時的位置

回答

相關問題