个人中心
gpt4 book ai didi

javascript - Google map 显示多张 map 而不是一张

转载 作者：行者123 更新时间：2023-12-03 11:34:13 25 4
gpt4 key购买 nike

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

我无法在一个 View 中同时显示访客和我的客户。意思是把它放大到那个水平。 google.maps.LatLngBounds 对我不起作用。我想知道为什么。

同时，我完全缩小，在一个地方看到 4 张 map 。我不知道这是怎么发生的。

我的代码如下

<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>

有人可以帮忙吗？

最佳答案

以下代码片段是在页面上设置 map 的内容。 :

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

您是否已单步执行代码以确保不会多次设置此值？

如果您这样做并且 map 仅设置一次，则可能与 map 支架和 map 本身的大小有关。

设置以下内容来解决该特定问题。 :

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

google map zoom out limit

关于javascript - Google map 显示多张 map 而不是一张，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26596614/

25 4 0
文章推荐： javascript - 加载外部 XML 文件后对其进行操作
文章推荐： 反序列化 reqwest 响应时找不到 json 方法
文章推荐： rust - 实现返回HashMap::IntoIter的IntoIterator时的“wrong number of type arguments”
文章推荐： javascript - HTML DOM 和 jQuery DOM 在一行简单的代码中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com