Question

我刚刚在堆栈溢出时发现了这个很棒的代码。它通过按下按钮打开一个信息窗口。但问题是。而不是信息窗口只有'marker1'我想要实现html代码。但是当我这样做时，我失败了。我只想实现像h1和un列表这样的简单代码。但它只赞成纯粹的tekst。

<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>
<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', '<h1>title</h1><p>tekst</p>', 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>

Answer 1

你能解释一下抛出的JS错误吗？我使用这样的东西

infoWindow = new google.maps.InfoWindow({
        content: data,
        maxWidth: 300,
        minHeight: 400,
        mId: marcador.mId
    });

    infoWindow.open(map, marcador);

数据是您想要放置的任何HTML字符串。例如：

<h1>Title</h1> <p>Text</p>

google在infowindow中映射html代码而不是纯tekst

1 个答案: