javascript - 谷歌地图 - 功能地理编码和标记

标签 javascript google-maps google-maps-api-3 google-maps-markers

我需要传递变量标记[x]和infoWindowContent[x]来代替字符串“标题标记”和“文本窗口”。

使用标记 [x] 或 infoWindowContent[x] 值未定义。

我该怎么做?

提前致谢!

function initialize(addresses, zoom_s) {

    // Multiple Markers
    var markers = [
        ['London Eye, London'],
        ['Palace of Westminster, London']
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content"><h3>London Eye</h3><p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p></div>'],
        ['<div class="info_content"><h3>Palace of Westminster</h3><p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p></div>']
    ];

    var bounds = new google.maps.LatLngBounds();
    var myOptions = {
        mapTypeId: 'roadmap'
    };

    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;
        var marker_testo = "";
        var info_testo = "";

        for (var x = 0; x < addresses.length; x++) {

            var marker_testo = addresses[x];

            geocoder.geocode({
                'address': addresses[x]
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: "Title Markers"

                        });

                        // Allow each marker to have an info window    
                        google.maps.event.addListener(marker, 'click', (function (marker, x) {
                            return function () {
                                infoWindow.setContent("Text Window");
                                infoWindow.open(map, marker);
                            }
                        })(marker, x));

                        // Automatically center the map fitting all markers on the screen
                        bounds.extend(results[0].geometry.location);

                        map.fitBounds(bounds);
                    }
                }
            });
        }

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(14);
            google.maps.event.removeListener(boundsListener);
        });
    }
}

最佳答案

var markers = [
    'London Eye, London',
    'Palace of Westminster, London'
];

console.log(markers[0]);

数组中不需要括号。请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

如何构造数组,您需要使用 markers[0][0]markers[1][0] 等。

编辑:

为了完成我的回答,这里有一种方法可以实现你想要的。创建一个计数器并在地理编码器结果内递增它,并创建一个新变量来保存 infoWindow 的内容。

var iwContent = infoWindowContent[counter];

var marker = new google.maps.Marker({
    position: results[0].geometry.location,
    map: map,
    title: addresses[counter]
});

google.maps.event.addListener(marker, 'click', function () {

    infoWindow.setContent(iwContent);
    infoWindow.open(map, marker);
});

counter++;

查看我的working example .

关于javascript - 谷歌地图 - 功能地理编码和标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24183301/

相关文章:

javascript - 如何获得连续的柱形图?

javascript - parseInt() 应该像这样工作吗?

javascript - 如何在 redux-observable 中正确使用 forkJoin?

javascript - 在 bash 脚本中执行 Node.js 文件

缩放事件监听器之前的 Javascript OpenLayers

ios - 在 Google map 中创建标记

Javascript代码执行顺序

javascript - 谷歌地图信息窗口关闭事件不起作用

javascript - Google Places 自动完成 API 多个实例

javascript - 触发子级点击但阻止事件传播到父级