Próbuję wprowadzić pewne poprawki w kodzie, ale programista nie może już pomóc. Nie mam pojęcia, jeśli chodzi o interfejs API i kod GMaps, ale nadal próbuję to rozgryźć.

Problem polega na tym, że mamy użytkowników na mapie i chcieliśmy, aby mapa została automatycznie powiększona, aby uwzględnić wszystkich użytkowników. Udało nam się to zrobić. Mamy jednak główny adres, który powinien być w tym zawarty, aby ... więc to, co chcemy zrobić, to automatyczne przybliżenie na tyle blisko, aby uwzględnić najdalszy punkt, niezależnie od tego, czy jest to użytkownik, czy adres główny. Aby zademonstrować, spójrz na poniższy adres URL:

http://app2.wehaveeyes.com/reports/maps/maps2.cfm

Jeśli pomniejszysz, zobaczysz, że główny adres znajduje się w odległości około 5 mil. Oto, co teraz pokazuje...

Ale właśnie to chcielibyśmy, aby automatyczne powiększanie zawierało główny adresMapa  ze wszystkimi użytkownikami i adresem

Poniżej kod:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <META HTTP-EQUIV="refresh" CONTENT="10">

    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 100%;  /* The height is the height of the web page */
            width: 100%;  /* The width is the width of the web page */
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .user_info {
            background-color: ##0000;
            font-weight: bold;
            color: #fff;
        }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">      
  </script>
    <script src="https://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-   
 markerwithlabel-1.9.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript">
        // Initialize and add the map
        function initMap() {
            var xml_data = "<MAP>" + 
                    "<location>1 South Main Street, Akron Ohio</location>" + 
                    "<user_info>" + 
                    "<user_name>Scott jones</user_name>" + 
                    "<user_lat>41.141756</user_lat>" + 
                    "<user_lon>-81.675599</user_lon>" + 
                    "<user_img>https://s3.amazonaws.com/media.wbur.org/wordpress/1/files/2015/03/AP736858445562.jpg</user_img>" +
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Bill James</user_name>" + 
                    "<user_lat>41.142758</user_lat>" + 
                    "<user_lon>-81.657274</user_lon>" + 
                    "<user_img>https://s.abcnews.com/images/US/jeff-koenig-ht-ml-190122_hpEmbed_2_4x5_992.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Karrie Sims</user_name>" + 
                    "<user_lat>41.135809</user_lat>" + 
                    "<user_lon>-81.639336</user_lon>" + 
                    "<user_img>https://www.odmp.org/media/image/officer/23891/orig/police-officer-natalie-corona.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>John Smith</user_name>" + 
                    "<user_lat>41.142855</user_lat>" + 
                    "<user_lon>-81.637319</user_lon>" + 
                    "<user_img>https://www.odmp.org/media/image/officer/24262/400/deputy-sheriff-jake-allmendinger.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Jim Deek</user_name>" + 
                    "<user_lat>41.131543</user_lat>" + 
                    "<user_lon>-81.653541</user_lon>" + 
                    "<user_img>https://lawofficer.com/wp-content/uploads/2016/10/blakesnyder.jpg</user_img>" + 
                    "</user_info>" + 
                    "</MAP>";

            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(xml_data, "text/xml");
            var address = xmlDoc.getElementsByTagName("location")[0].textContent;
            var users = xmlDoc.getElementsByTagName("user_info");
            var user_list = [];

            for (var i = 0; i < users.length; i++) {
                user_list.push({
                    "name": users[i].getElementsByTagName("user_name")[0].textContent,
                    "lat": users[i].getElementsByTagName("user_lat")[0].textContent,
                    "lng": users[i].getElementsByTagName("user_lon")[0].textContent,
                    "img": users[i].getElementsByTagName("user_img")[0].textContent
                });
            }

            // The location of US
            var map_center = {lat: 39.8283, lng: -98.5795};
            // The map, centered at US
            var map = new google.maps.Map(document.getElementById('map'), {zoom: 3, center: map_center});

            // boundary of all pins
            var bounds = new google.maps.LatLngBounds();

            // converts address into geolocation with lat and lng
            geocoder = new google.maps.Geocoder();
            codeAddress(geocoder, map, address);

            // adds user_info marker
            for (const index in user_list) {
                lat = parseFloat(user_list[index]["lat"]);
                lng = parseFloat(user_list[index]["lng"]);

                var point = {lat: lat, lng: lng}
                var lbl_content = "<div style='text-align: center;'><div><img src='" + 
                        user_list[index]["img"] + 
                        "' width='30px' height='38px' style='border: 2px solid #000; display: block; margin: 0 auto;'></div>" + 
                        "<div style='background-color: #000; padding: 2px;'>" + 
                        user_list[index]["name"] + 
                        "</div></div>";
                var marker = new MarkerWithLabel({
                    position: point,
                    icon: {
                        url: "./res/police_pin.png",
                        scaledSize: new google.maps.Size(40, 40)
                    },
                    map: map,
                    title: user_list[index]["name"],
                    labelContent: lbl_content,
                    labelAnchor: new google.maps.Point(0, 0),
                    labelClass: "user_info",
                    labelInBackground: true
                });

                // extends boundary
                bounds.extend(point);

                // shows coordinate tooltip with 4-decisions
               // var infowindow = new google.maps.InfoWindow({
                //    content: lat.toFixed(4) + ", " + lng.toFixed(4)
               // });
               // infowindow.open(map, marker);
            }

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

        /////////////////////////////////////////
        /// converts address into geolocation ///
        /////////////////////////////////////////
        function codeAddress(geocoder, map, address) {
            geocoder.geocode({'address': address}, function (results, status) {
                if (status === 'OK') {
                    // relocates the map centered at address pin
    //                        map.setCenter(results[0].geometry.location);

                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon: {url: "./res/911_call.png", scaledSize: new google.maps.Size(55, 55)}
                    });

                    // shows coordinate tooltip with 4-decisions
                    //lat = results[0].geometry.location.lat();
                    //lng = results[0].geometry.location.lng();
                    //var infowindow = new google.maps.InfoWindow({
                    //    content: lat.toFixed(4) + ", " + lng.toFixed(4)
                    //});
                    //infowindow.open(map, marker);
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        ////////////////////////////
        /// reads local xml file ///
        ////////////////////////////
        function readTextFile(file)
        {
            var allText = "";
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file, false);
            rawFile.onreadystatechange = function ()
            {
                if (rawFile.readyState === 4)
                {
                    if (rawFile.status === 200 || rawFile.status == 0)
                    {
                        allText = rawFile.responseText;
                    }
                }
            }
            rawFile.send(null);
            return allText;
        }

        initMap();
    </script>
  </body>
 </html>

Przeszedłem przez wiele tablic i próbowałem pracować z kodem, ale nic nie działało. Każda pomoc byłaby świetna.

Dziękuję Ci bardzo!!!

0
Scott 20 listopad 2019, 00:45
Spraw, aby Twoja funkcja codeAddress zwróciła geokodowaną lokalizację adresu i zrób to samo bounds.extend(foo) z tym adresem, co robisz dla pozostałych punktów.
 – 
alphabetasoup
20 listopad 2019, 04:53
Dziękuję. Spróbuję. Więc mówisz w pewnym sensie, że łączysz adres ze znakami użytkownika?
 – 
Scott
20 listopad 2019, 05:38
Rodzaj - chodzi o to, że aktualnie robisz bounds.extend(point) dla wszystkich punktów, które są użytkownikami; ale nie używasz punktu 911 do rozszerzenia granic. Możesz je połączyć lub po prostu uruchomić tę funkcję niezależnie od punktu 911.
 – 
alphabetasoup
20 listopad 2019, 08:54
Dziękuję Ci bardzo. Na pewno spróbuję!!! Doceniam Twoją pomoc!
 – 
Scott
20 listopad 2019, 18:11
Jeszcze raz dziękuję zupa alfabetu! Z punktu widzenia kodowania, czy masz sugestię, jak edytować kod, aby to zrobić? Jestem okropny, jeśli chodzi o kod Google API i łamię więcej niż naprawiam. Każda pomoc byłaby bardzo mile widziana.
 – 
Scott
20 listopad 2019, 20:03

1 odpowiedź

Aby upewnić się, że każda znacząca lokalizacja jest uwzględniona w widoku mapy, możesz użyć metody map.fitBounds(). Zgodnie z tym dokumentem, ta metoda

Ustawia rzutnię tak, aby zawierała podane granice.

Widzę, że już wdrażasz tę metodę, aby wyświetlić wszystkich użytkowników. To powiedziawszy, musisz po prostu dodać (co nazywasz) main address na granicach.

Aby dodać współrzędne adresu głównego do instancji bounds, wystarczy użyć metody bounds.extend().

Sprawdziłem kod na witrynie i oto, co możesz zrobić, aby to osiągnąć :

  1. Ustaw zmienną bounds jako zmienną globalną, przesuwając ją nad swoją funkcją initMap().
  2. W funkcji codeAddress() dodaj współrzędne main address, rozszerzając bounds. Oto fragment kodu do tego:

    // Add the main address' coordinates by using bounds.extend method
    // results[0].geometry.location contains the main address' coordinates
    bounds.extend(results[0].geometry.location);
    
  3. Przenieś metodę map.fitBounds() tuż pod metodę bounds.extend() w kroku 2.

    // fits map
    map.fitBounds(bounds);
    

Oto działające skrzypce oparte na Twoim kodzie.

1
annkylah 29 listopad 2019, 08:47