Question

我正在开发我的第一个谷歌地图项目。我有多个标记出现，也使用自定义标记。但是，单击标记时，我无法使信息窗口生效！有人可以帮忙吗？

单击标记时，没有任何反应 - 它甚至没有进入该功能（我设置了控制台日志）。

<script type="text/javascript">

var map,
    geocoder,
    bounds,
    address,
    marker = [],
    myLatlng = new google.maps.LatLng(40, -74);

function initialize() {

    var mapOptions = {
        center: myLatlng,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: true,
        draggable: true
    };


    //styles
    var styles = [{
    "elementType": "geometry.fill",
    "stylers": [
        { "visibility": "on" },
        { "hue": "#FF0000" },
        { "weight": 2 },
        { "gamma": 1 },
        { "lightness": 20 },
        { "saturation": 50 }
        ]
    }];


    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    geocoder = new google.maps.Geocoder();

    map.setOptions({styles: styles});


    var buildings = [
            '76 Ninth Ave, New York, NY ‎',
            '825 8th Ave, New York, NY ',
            '127 E 23rd St, New York, NY ‎'
];



    var contentString = '<div id="content">test</div>';

    var infowindow = new google.maps.InfoWindow({
            content: contentString      
        });

    var marker = {url:'<?php echo site_url(); ?>/wp-content/themes/theme/img/pointer2.png', scaledSize:new google.maps.Size(45, 72)};


    for (var i = 0; i < buildings.length; ++i) {
        (function(address) {
            geocoder.geocode({ 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                     marker += new google.maps.Marker ({
                            map: map,
                            position: results[0].geometry.location,
                            icon: marker

                    });
                };
            });
        })(buildings[i]);
    };

    google.maps.event.trigger(map, 'resize');

    google.maps.event.addListener(marker, 'click', function() {
        console.log("test3");
        infowindow.open(map,marker);

        map.setZoom(8);
        map.setCenter(marker.getPosition());
    });

};


google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我认为首先你必须在循环中移动click eventListener。你在顶部有一个标记数组，但是你用var marker = {url:'<?php echo site_url(); ?>...覆盖它，所以我们暂时把它称为“yourIcon”。此外，在循环中你将所有标记添加到一个单独的字符串，就我而言没有任何意义;）

在循环中，你必须将eventListener附加到每个单独的标记

for (var i=0; i < buildings.length; i++) {
    // Create a new lexical scope by "copying the buildings"
    (function(address) {
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // Create the marker
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                // Create the info window
                var infowindow = new google.maps.InfoWindow({
                    content: address
                });

                // Add the eventListener
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, this);
                    map.setZoom(12);
                    map.panTo(this.getPosition());
                });                   
            };
        });
    })(buildings[i]);
}

你可以看到工作小提琴here

P.S。
你已经在你的问题中避免了关闭问题，我只是厌倦了看到它;）
以下是解释闭包的方法：How do JavaScript closures work?

编辑1：Wordpress
为了在wordpress中完成这项工作，您不必做太多工作。我建议在建筑物阵列中使用对象，这样您就可以轻松访问更多数据。

这就是您的建筑物阵列的样子：

var buildings = [
    { address: '76 Ninth Ave, New York, NY‎', title: "Test 1" },
    { address: '825 8th Ave, New York, NY‎', title: "Test 2" },
    { address: '127 E 23rd St, New York, NY‎', title: "Test 3" }
];

循环：

<?php if ( have_posts() ) : ?>
    <?php $postCount = 0; ?>
    var buildings = [
    <?php while ( have_posts() ) : the_post(); ?>
        <?php $postcount++; ?>
        { address: '<?php customMetaAddressHere; ?>', title: '<?php the_title(); ?>', link: '<?php the_permalink(); ?>', }
        <?php if($postCount < sizeof($posts)) { ?>
        ,
        <?php } ?>
    <?php endwhile; ?>
    ];
<?php else : ?>
    var buildings = [];
<?php endif; ?>

将您的Google标记循环更改为：

(function(building) {
    geocoder.geocode({ 'address': building.address }, function(results, status) {
        // You have access to buildings.title as well
        ...
    });
})(buildings[i]);

这是未经测试的，但你可以看到我的意思here。

编辑2：只有一个活动信息窗
如果你想一次只打开一个infowindow，最好在循环外创建它，只在标记点击时改变它的内容和位置：

// Create the info window
var infowindow = new google.maps.InfoWindow();

for (var i=0; i < buildings.length; i++) {
    // Create a new lexical scope by "copying the buildings"
    (function(building) {
        geocoder.geocode({ 'address': building.address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // Create the marker
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                // Add the eventListener
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent("<b>" + building.title + "</b><br> " + building.address);
                    infowindow.setPosition(this.getPosition());
                    infowindow.open(map, this);
                    map.setZoom(12);
                    map.panTo(this.getPosition());
                });               
            };
        });
    })(buildings[i]);
}

你可以找到一个工作小提琴here。

Google地图 - 信息窗口无效（无控制台日志错误）

1 个答案: