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

发布于 2024-12-28 06:19:47 字数 192 浏览 1 评论 0原文

我的目标是创建一个包含多个位置的地图，当在页面上的其他位置单击 html 标签时，该地图会从一个标记跳转到另一个标记，

我使跳转工作，但是，我似乎无法让鼠标悬停信息框工作。 .我进行了搜索，但找不到这个具体问题

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

原文

My goal is create a map with multiple locations with a map that jumps from marker to marker when a html tag was click elsewhere on the page

i made the jumps work but, i can't seem to get the mouseover info boxes to work...i have search but can't find this specific problem

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我只土不豪 2025-01-04 06:19:47

工作示例..

<!DOCTYPE html>
<html>
    <head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&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>

working example..

<!DOCTYPE html>
<html>
    <head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&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>

回复收藏 0 原文

~没有更多了~