Question

我已将标记添加到Google地图中，并使用map.fitBounds（）缩放地图，以便市场位于地图的边缘。这很有效。

但是，只显示一个标记时会出现一些问题。

第一个问题是它显示了地图中心（您必须这样做）在它显示位置本身之前提供。
第二个问题是它尽可能放大，而不是选项中指定的缩放级别。我认为这与fitBounds（）有关。

您可以在此处查看该网站：

http://198.211.123.245/tga-directory/directory/

如果您点击其中一个商家，只需一个标记即可转到单页。

这是我的代码：

jQuery(document).ready(function ($) {

    function initialize() {

        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(51.4800, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        setMarkers(map, data.companies);

        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
    }

    var markerBounds = new google.maps.LatLngBounds();

    function setMarkers(map, markers) {

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

            var company = data.companies[i];

            var LatLng = new google.maps.LatLng(company['lat'], company['long']);

            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: company['name'],
                html: '<div style="width:200px; height:100px;">' + company['name'] + '<br><a href="' + company['link'] + '">View</a></div>',
            });

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': company['address']
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    markerBounds.extend(results[0].geometry.location);
                    map.fitBounds(markerBounds);
                }
            });

        }
    }

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

干杯。

谷歌地图 - 带有fitBounds的单一地图标记

0 个答案: