【问题标题】:Adding links that open an info window in Google maps API v3添加在 Google 地图 API v3 中打开信息窗口的链接
【发布时间】:2013-11-29 04:27:26
【问题描述】:

无法添加在我的谷歌地图上居中并打开信息窗口的链接。标记及其信息窗口在地图本身内工作正常。

真正的问题是构造一个我的 onclick 函数可以正确引用的对象。我的面向对象的 Javascript 知识是不稳定的,我只是没有看到解决方案。

地图是通过在页面加载时调用的函数加载的,我有一个单独的函数,在点击页面内的 href 时调用。 代码如下。

function addMap(addressesJSON, id){
    var addresses = eval('(' + addressesJSON + ')');
    var cenLat = 41.677389;
    var cenLng = -72.384294;
    var latLow = 41.4;
    var lngLow = -72.8;
    var latHigh = 41.8;
    var lngHigh = -71.9;
    if (addresses.length){
        for (var i in addresses){
            addresses[i].lat = parseFloat(addresses[i].lat);
            addresses[i].lng = parseFloat(addresses[i].lng);
            if (i == 0){
                latLow = addresses[i].lat;
                latHigh = addresses[i].lat;
                lngLow = addresses[i].lng;
                lngHigh = addresses[i].lng;
            } else {
                if (addresses[i].lat < latLow){
                    latLow = addresses[i].lat;
                }
                if (addresses[i].lat > latHigh){
                    latHigh = addresses[i].lat;
                }
                if (addresses[i].lng < lngLow){
                    lngLow = addresses[i].lng;
                }
                if (addresses[i].lng > lngHigh){
                    lngHigh = addresses[i].lng;
                }
            }
            address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>";
            addresses[i].address = address;
        }
        cenLat = (latLow + latHigh) / 2;
        cenLng = (lngLow + lngHigh) / 2;
    }

    var mapOptions = {
        center: new google.maps.LatLng(cenLat, cenLng),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Display a map on the page
    var map = new google.maps.Map(document.getElementById(id), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var infowindow =  new google.maps.InfoWindow();

    for (var i in addresses){
        var letter = addresses[i].letter;
        var data = addresses[i].address;
        var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);

        var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: addresses[i].name,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
        });

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function () {
                // Center on marker
                map.setCenter(marker.getPosition());
                // Set the data for the info window
                infowindow.setContent(data);
                // show the infowindow
                infowindow.open(map, marker);
            });
        })(marker, data);
    }
    map.fitBounds(bounds);
}

以及我要打开相应信息窗口的onclick触发的功能。

function moveCenter(lat, lng, letter){
    google.maps.event.trigger(marker[letter], "click");
}

任何关于如何构建标记对象数组并让我的 moveCenter 函数看到它的帮助将不胜感激。

【问题讨论】:

    标签: javascript google-maps-api-3


    【解决方案1】:

    看起来您只需将这一行添加到您的代码中:

    markers[letter] = marker;
    

    并改变你的功能:

    function moveCenter(lat, lng, letter){
        google.maps.event.trigger(markers[letter], "click");
    }
    

    (确保标记数组在全局范围内)

    markers = [];
    function addMap(addressesJSON, id){
        var addresses = eval('(' + addressesJSON + ')');
        var cenLat = 41.677389;
        var cenLng = -72.384294;
        var latLow = 41.4;
        var lngLow = -72.8;
        var latHigh = 41.8;
        var lngHigh = -71.9;
        if (addresses.length){
            for (var i in addresses){
                addresses[i].lat = parseFloat(addresses[i].lat);
                addresses[i].lng = parseFloat(addresses[i].lng);
                if (i == 0){
                    latLow = addresses[i].lat;
                    latHigh = addresses[i].lat;
                    lngLow = addresses[i].lng;
                    lngHigh = addresses[i].lng;
                } else {
                    if (addresses[i].lat < latLow){
                        latLow = addresses[i].lat;
                    }
                    if (addresses[i].lat > latHigh){
                        latHigh = addresses[i].lat;
                    }
                    if (addresses[i].lng < lngLow){
                        lngLow = addresses[i].lng;
                    }
                    if (addresses[i].lng > lngHigh){
                        lngHigh = addresses[i].lng;
                    }
                }
                address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>";
                addresses[i].address = address;
            }
            cenLat = (latLow + latHigh) / 2;
            cenLng = (lngLow + lngHigh) / 2;
        }
    
        var mapOptions = {
            center: new google.maps.LatLng(cenLat, cenLng),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    
        // Display a map on the page
        var map = new google.maps.Map(document.getElementById(id), mapOptions);
        var bounds = new google.maps.LatLngBounds();
        var infowindow =  new google.maps.InfoWindow();
    
        for (var i in addresses){
            var letter = addresses[i].letter;
            var data = addresses[i].address;
            var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
    
            var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
            bounds.extend(latlng);
    
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: addresses[i].name,
                icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
            });
            markers[letter] = marker;
    
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function () {
                    // Center on marker
                    map.setCenter(marker.getPosition());
                    // Set the data for the info window
                    infowindow.setContent(data);
                    // show the infowindow
                    infowindow.open(map, marker);
                });
            })(marker, data);
        }
        map.fitBounds(bounds);
    }
    

    【讨论】:

    • 啊,我是如此接近!非常感谢你的帮助。完美运行。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-13
    • 2013-02-15
    • 2013-02-22
    • 2011-02-27
    相关资源
    最近更新 更多