个人中心
gpt4 book ai didi

javascript - Google map 进行调整以包含用户和地址

转载 作者：行者123 更新时间：2023-12-02 22:29:58 25 4
gpt4 key购买 nike

我正在尝试对代码进行一些调整，但开发人员无法再提供帮助。我对 GMaps api 和代码一无所知，但我仍在试图弄清楚。

问题是我们在 map 上有用户，我们希望 map 自动放大以包含所有用户。我们能够做到这一点。然而，我们有一个应该包含在其中的主要地址......所以我们想要做的是自动缩放到足够近以包括最远的点，无论它是用户还是主要地址。要进行演示，请查看下面的 URL:

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

如果缩小，您会看到主要地址位于大约 5 英里之外。 Here is what it shows now...

但这就是我们希望它自动缩放以包含主地址 Map with all users and address

下面是代码:

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

我已经浏览了很多板并尝试使用代码，但没有任何效果。任何帮助都会很棒。

非常感谢!!!

最佳答案

要确保 map 视口(viewport)内覆盖每个重要位置，您可以使用 map.fitBounds() 方法。根据这个doc ，这个方法

Sets the viewport to contain the given bounds.

我发现您已经实现了此方法来显示每个用户。也就是说，您只需在边界上添加(您所说的)主地址。

要将主地址的坐标添加到边界实例中，您只需使用 bounds.extend() 方法。

我检查了site上的代码您可以采取以下措施来实现这一目标:

  1. 将变量 bounds 移至 initMap() 函数上方，使其成为全局变量。

  2. 在您的 codeAddress() 函数中，通过扩展边界来添加主地址坐标。这是一个代码片段:

    // 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. 将 map.fitBounds() 方法移至步骤 #2 中 bounds.extend() 方法的正下方。

    // fits map
    map.fitBounds(bounds);

这是一个工作 fiddle这是基于您的代码。

关于javascript - Google map 进行调整以包含用户和地址，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58943290/

25 4 0
文章推荐： javascript - 无法使用 Protractor 在文本框中输入文本
文章推荐： javascript - 当 Express.js 服务器获取时，从 MongoDB 检索的值是未定义的
文章推荐： javascript - 从 HTML Canvas 中提取的 ArrayBuffer 与使用 UTIF 解码并加载到其上的 ArrayBuffer 不同
文章推荐： javascript - 如何让 Cypress 在点击之间不等待
行者123
个人简介

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

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