Question

我见过这样的问题 - 但在答案中他们使用javascript生成一个链接列表，然后可点击这些链接以“跳转到”地图上的标记，例如：http://www.geocodezip.com/v3_MW_example_map2.html

我想要做的是创建我自己的链接，在与地图相同的页面上执行相同的操作，但我不希望生成列表，因为我需要将链接放在页面的不同位置。

我的地图代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {
        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var sites = [
          ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
          ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
          ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
          ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
          ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
          ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
        ];

        var markers = setMarkers(map, sites);

        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var mc = new MarkerClusterer(map, markers);
    }



    function setMarkers(map, sites) {
        var markers = [];

        for (var i = 0; i < sites.length; i++) {
            var site = sites[i];
            var siteLatLng = new google.maps.LatLng(site[1], site[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: site[0],
                zIndex: site[3],
                html: site[4],
    //icon: site[5]   // commented so we can see the original marker icon
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
               infowindow.setContent(this.html);
               infowindow.open(map, this);
            });
        }
         return markers;
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>

Answer 1

这是代码的示例

<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
    <script type="text/javascript">
    var markers = [];
    var infowindow = null;
    //$(document).ready(function () { initialize();  });

    function initialize() {
        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker, i;
        var sites = [
          ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
          ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
          ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
          ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
          ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
          ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
        ];

        var markers = setMarkers(map, sites);

        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var mc = new MarkerClusterer(map, markers);
    }

    function setMarkers(map, sites) {      

        for (var i = 0; i < sites.length; i++) {
            var site = sites[i];
            var siteLatLng = new google.maps.LatLng(site[1], site[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: site[0],
                zIndex: site[3],
                html: site[4],
            //icon: site[5]   // commented so we can see the original marker icon
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
               infowindow.setContent(this.html);
               infowindow.open(map, this);
            });
        }
         return markers;
    }
    // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
<a href="#" onclick="myClick(0);">Open Info Window</a>
<a href="#" onclick="myClick(1);">Open Info Window2</a>
<a href="#" onclick="myClick(2);">Open Info Window3</a>
<a href="#" onclick="myClick(3);">Open Info Window4</a>
<a href="#" onclick="myClick(4);">Open Info Window5</a>
<a href="#" onclick="myClick(5);">Open Info Window6</a>
</body>
</html>

最好的问候

链接到谷歌地图标记与地图下方的链接

1 个答案: