api - 谷歌地图 api v3 带有信息窗口的多个跳跃位置标记-6ren

api - 谷歌地图 api v3 带有信息窗口的多个跳跃位置标记

转载作者：行者123 更新时间：2023-12-04 06:00:30

我的目标是创建一个包含多个位置的 map ，当点击页面上的其他位置时，该 map 会从一个标记跳到另一个标记

我做了跳跃工作，但我似乎无法让鼠标悬停信息框工作......我有搜索但找不到这个特定问题

www.humphrey-ray.com/qp/locations-new27a.html

最佳答案

工作示例..

<!DOCTYPE html>
<html>
    <head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&amp;sensor=false">
</script> <script type="text/javascript">
var map;
var marker2;
var marker3;
var marker4;
var marker5;
var infowindow = new google.maps.InfoWindow();
function initialize() {
    var latlng = new google.maps.LatLng(39.94718, -75.14323);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(39.94718, -75.14323),
        map: map,
        title: "my 2nd title"
    });

    new google.maps.event.addListener( marker2, 'mouseover', function() {
                infowindow.setContent("my 2nd title");
                infowindow.open(map,this);
        });
    marker3 = new google.maps.Marker({
        position: new google.maps.LatLng(39.94924, -75.14268),
        map: map,
        title: "my 2nd title"
    });
    new google.maps.event.addListener( marker3, 'mouseover', function() {
                infowindow.setContent("my 3nd title");
                infowindow.open(map,this);
        });

    marker4 = new google.maps.Marker({
        position: new google.maps.LatLng(39.96146, -75.14325),
        map: map,
        title: "my 2nd title"
    });
    new google.maps.event.addListener( marker4, 'mouseover', function() {
                infowindow.setContent("my 4nd title");
                infowindow.open(map,this);
        });


    marker5 = new google.maps.Marker({
        position: new google.maps.LatLng(39.95098, -75.14558),
        map: map,
        title: "my 5nd title"
    });

        new google.maps.event.addListener( marker5, 'mouseover', function() {
                infowindow.setContent("my 5nd title");
                infowindow.open(map,this);
        });

}
function goToLoc(id){
    if(id== 2)
    map.setCenter(marker2.getPosition());
    if(id == 3)
    map.setCenter(marker3.getPosition());
    if(id == 4)
    map.setCenter(marker4.getPosition());
    if(id == 5)
    map.setCenter(marker5.getPosition());
}

</script> <style type="text/css">
body,td,th { font-family: Arial, Helvetica, sans-serif; }

</style> 
    </head>
    <body onload="initialize()">
        <div id="container">

<!-- /header -->


<!-- /nav -->
            <div class="mapwrapper">
                <div class="mapwrapper" id="map_canvas" style="width:720px; height:400px">
                </div>
                <div class="mapwrapper">

                    <div class="right-top-column">
                        <div class="right-top-column-inner">
                            <br>
                            <img src="img/comin_soon.jpg" width="180" height="186" />
                            </p>
                        </div>
                    </div>
                    <div class="right-top-column-noshaw">
                        <h1>

                            Click Location to show on map
                        </h1>
                        <ul class="side-list">
                            <li>
                                <a href="#" id="marker2" onclick="goToLoc(2)">
                                    Old City</a>
                            </li>
                            <li>
                                <a href="#" id="marker3" onclick="goToLoc(3)">

                                    South Street/Society Hill</a>
                            </li>
                            <li>
                                <a href="#" id="marker4" onclick="goToLoc(4)">
                                    Northern Liberties</a>
                            </li>
                            <li>
                                <a href="#" id="marker5" onclick="goToLoc(5)">

                                    Old City</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>