2

我有一个页面，其中左侧信息来自数据库，如企业名称、详细信息、地址。在右侧，我有一张地图，显示从数据库中获取的地址标记。现在我想在鼠标悬停到左侧信息时在地图上显示标记，其地址存储在数据库中。

4

1 回答 1

0

你可以这样做，

为了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-18T09:14:47.347 回答