Question

我想添加一系列要点：

var arr1 = [
                [40.664171,-73.983886,"410 7th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">'],
                [40.661113,-73.990103,"652 6th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">']
            ];

我的markerOptions目前看起来像：

                var markerOptions = {
                    position: markerLocation,
                    map: map,
                    title:arr1[i][2],
                    icon: "ShotGlass.png"
                };

目前点击标记时的输出是地址（例如：410 7th Ave，Brooklyn，NY，11215），如果标题：arr1 [i] [2]设置，并且镜头玻璃图片设置为标题：ARR1 [I] [3]。

我怎样才能得到它，以便信息窗口中的地址后跟一个图像？

谢谢。

以下是完整代码：

<html>
    <head>
        <title>Shot Glass Map</title>
        <link rel="shortcut icon" href="ShotGlass.png">

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(Key left out of post)&sensor=false">
        </script>

        <script type="text/javascript">

            var centerLocation = new google.maps.LatLng(39.810456, -98.555407);
            var mapType = google.maps.MapTypeId.ROADMAP;
            var mapOptions = {
                center: centerLocation,
                zoom: 5,
                mapTypeId: mapType
            };

            var arr1 = [
                [41.118459, -75.007712,"Buskhill Falls", '<IMG BORDER="0" ALIGN="Left" SRC="images/BushkillFalls.jpg">'],
                [40.661113,-73.990103,"652 6th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">']
            ];  

            function initialize() {
                var divElement = document.getElementById("map_canvas");

                var map = new google.maps.Map(divElement, mapOptions);

                for (var i=0; i<arr1.length; i++) {

                    var markerLocation = new google.maps.LatLng(arr1[i][0],arr1[i][1]);

                    var markerOptions = {
                        position: markerLocation,
                        map: map,
                        title:arr1[i][2],
                        icon: "ShotGlass.png"
                    };


                    var marker = new google.maps.Marker(markerOptions);

                    var infoWindowOptions = {
                        //content: "<strong>Hello</strong> World",
                        //content: "Central Park <br/> <a href='http://en.wikipedia.org/wiki/Central_Park'>Wikipedia</a> <br/> <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg/240px-Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg' />"
                        content:arr1[i][2],
                        maxWidth: 200
                    };

                var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent(this.title);
                    infoWindow.open(map,this);
                } );
                }

                for (var i=0; i<arr2.length; i++) {

                    var markerLocation = new google.maps.LatLng(arr2[i][0],arr2[i][1]);

                    var markerOptions = {
                        position: markerLocation,
                        map: map,
                        title:arr2[i][2],
                        icon: "latte.png"
                    };


                    var marker = new google.maps.Marker(markerOptions);

                    var infoWindowOptions = {
                        //content: "<strong>Hello</strong> World",
                        //content: "Central Park <br/> <a     

href='http://en.wikipedia.org/wiki/Central_Park'>Wikipedia</a> <br/> <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg/240px-Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg' />"
                    content:arr2[i][2]
                    };

                var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent(this.title);
                    infoWindow.open(map,this);
                } );
                }               
            }

        </script>
    </head>

    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
    </body>
</html>

Answer 1

function setInfoWindows(marker, index) {
                var infowindow = new google.maps.InfoWindow({
                    content: arr1[index][2]
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(marker.get('map'), marker);
                });
            }
         function initialize() {
                        var divElement = document.getElementById("map_canvas");

                        var map = new google.maps.Map(divElement, mapOptions);
                        var marker=[];
                        for (var i=0; i<arr1.length; i++) {

                            var markerLocation = new google.maps.LatLng(arr1[i][0],arr1[i][1]);

                            var markerOptions = {
                                position: markerLocation,
                                map: map,
                                //title:arr1[i][2],
                                icon: "ShotGlass.png"
                            };


                            marker[i] = new google.maps.Marker(markerOptions);

                            setInfoWindows(marker[i], i);

                        }

抱歉，朋友不能向你解释，我不懂英语。我认为这很明显

将图像添加到Google Maps API中的信息窗口markerOptions

1 个答案: