Question

我正在使用Google Maps Javascript API在我的网站上显示此内容。我将访客的当前位置设置为红色标记，然后在距离当前位置10公里的范围内标记我的客户。

我无法在一个视图中同时显示访问者和我的客户。意思是将它缩放到那个级别。 google.maps.LatLngBounds对我不起作用。我想知道为什么。

与此同时，我完全缩小了，我在一个地方看到了4张地图。我不知道这是怎么回事。

我的代码在

下面

<section id="wrapper" class="row main-section" style="height: 100%;">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script>
                                function success(position) {
                                    var mapcanvas = document.createElement('div');
                                    mapcanvas.id = 'mapcontainer';
                                    var myHeight = document.getElementById("scrHeight").value;
                                    var myWidth = document.getElementById("scrWidth").value;
                                    console.log(myHeight);
                                    myHeight = myHeight-155;
                                    console.log(myHeight);
                                    console.log(myWidth);
                                    mapcanvas.style.height = myHeight+'px';
                                    mapcanvas.style.width = '100%';

                                    document.querySelector('article').appendChild(mapcanvas);

                                    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                                    var options = {
                                        zoom: 16,
                                        center: coords,
                                        mapTypeControl: false,
                                        navigationControlOptions: {
                                            style: google.maps.NavigationControlStyle.SMALL
                                        },
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    };
                                    var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

                                    var marker = new google.maps.Marker({
                                          position: coords,
                                          map: map,
                                          title:"You are here!"
                                    });
                                    var myTable = document.getElementById("markerTable");
                                    var myLength = myTable.rows.length;
                                    var infowindow = new google.maps.InfoWindow({ maxWidth: 360 });
                                    var markers = new Array();
                                    var latlngbounds = new google.maps.LatLngBounds();



                                    for (var i = 0; i < myLength; i++) {
                                        var myRow = document.getElementById("markerTable").rows[i].cells;
                                        var myId = myRow[0].innerHTML;
                                        var myDisplayName = myRow[1].innerHTML;
                                        var myShortPres = myRow[2].innerHTML;
                                        var myAddress = myRow[3].innerHTML;
                                        var myLatitude = myRow[4].innerHTML;
                                        var myLongitude = myRow[5].innerHTML;
                                        var myRate = myRow[6].innerHTML;
                                        var myLabel = myRow[7].innerHTML;
                                        var contentString = '<html code here>';
                                        console.log("name", contentString);
                                        var coords = new google.maps.LatLng(myLatitude, myLongitude);
                                        //var infowindow = new google.maps.InfoWindow({ content: contentString });
                                        var marker = new google.maps.Marker({
                                            position: coords,
                                            map: map,
                                            title: myDisplayName,
                                            icon: "http://labs.google.com/ridefinder/images/mm_20_white.png"
                                        });
                                         //latlngbounds.extend(coords);
                                        markers.push(marker);
                                        google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
                                            return function() {
                                                infowindow.setContent(contentString);
                                                infowindow.open(map, marker);
                                            };
                                        })(marker, contentString));
                                    }
                                    //map.fitBounds(latlngbounds);
                                    //function AutoCenter() {
                                    //  Create a new viewpoint bound
                                    //    var bounds = new google.maps.LatLngBounds();
                                    //  Go through each...
                                    //    $.each(markers, function (index, marker) {
                                    //        bounds.extend(marker.position);
                                    //    });
                                    //  Fit these bounds to the map
                                    //    map.fitBounds(bounds);
                                    //}
                                    //AutoCenter();
                                    google.maps.event.addListener(map, "click", function () {
                                        infowindow.close(); 
                                    });
                                }
                                if (navigator.geolocation) {
                                    navigator.geolocation.getCurrentPosition(success);
                                } else {
                                    error('Geo Location is not supported');
                                }
                            </script>

有人可以帮忙吗？

Answer 1

以下代码段是您在网页上设置地图的内容。：

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

您是否已逐步完成代码以确保不会多次设置此代码？

如果你这样做并且地图只被设置一次，那么它可能与地图持有者的大小和地图本身有关。

设置以下内容以修复该特定问题。：

 map.setOptions({ minZoom: 5, maxZoom: 15 });

google map zoom out limit

谷歌地图显示多个地图而不是一个

1 个答案: