Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
120 views
in Technique[技术] by (71.8m points)

javascript - Google Maps进行调整以包括用户和地址(Google Maps adjusting to include users and address)

I am trying to make some adjustments to code and the developer is no longer available to assist.(我正在尝试对代码进行一些调整,并且开发人员不再可以提供帮助。)

i am clueless when it comes to the GMaps api and code but still I am trying to figure out.(对于GMaps api和代码,我一无所知,但我仍在设法弄清楚。) Problem is we have users on the map and we wanted the map to auto zoom in to include all of the users.(问题是我们在地图上有用户,我们希望地图自动放大以包括所有用户。) This we were able to do.(这是我们能够做到的。) However we have a main address that should be included in that to... so what we want to do is auto zoom close enough to include the farthest point, whether it is a user OR the main address.(但是,我们应该在其中包含一个主要地址,因此...我们想要做的是自动缩放到足够近的距离,以包括最远的点,无论是用户还是主要地址。) To demonstrate, look at the URL below:(为了演示,请看下面的URL:) http://app2.wehaveeyes.com/reports/maps/maps2.cfm(http://app2.wehaveeyes.com/reports/maps/maps2.cfm) If you zoom out you'll see the main address is about 5 miles away.(如果缩小,则会看到主要地址在5英里外。) 这是现在显示的内容... But this is what we would like it to auto zoom to include the main address(但这就是我们想要自动缩放以包含主要地址的方式) 映射所有用户和地址 Below is the code:(下面是代码:) <!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> I have gone through so many boards and have tried working with the code but nothing has worked.(我经历了很多板块,并尝试使用该代码,但没有任何效果。) Any help would be great.(任何帮助都会很棒。) Thank you very much!!!(非常感谢你!!!)   ask by Scott translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

To make sure that every significant location is covered within the map viewport, you could use the map.fitBounds() method.(为了确保每个重要位置都被地图视口覆盖,可以使用map.fitBounds()方法。)

As per this doc , this method(根据此文档 ,此方法) Sets the viewport to contain the given bounds.(将视口设置为包含给定的边界。) I see that you are already implementing this method to display every users.(我看到您已经在实现此方法来显示每个用户。) That said, you just have to add the (what you call the) main address on the bounds.(也就是说,您只需要在边界上添加(称为) main address 。) To add the main address' coordinates to the bounds instance, you just have to use the bounds.extend() method.(要将主地址的坐标添加到bounds实例,只需使用bounds.extend()方法。) I checked the code on the site and here's what you can do to achieve this:(我检查了网站上的代码,这是实现此目的的方法:) Make the variable bounds a global variable by moving it above your initMap() function.(通过将变量bounds移到initMap()函数上方,使它成为全局变量。) On your codeAddress() function, add the main address ' coordinates by extending the bounds .(在您的codeAddress()函数上,通过扩展bounds添加main address的坐标。) Here's a code snippet for that:(这是一个代码片段:) // 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); Move the map.fitBounds() method just below the bounds.extend() method on Step #2.(移动map.fitBounds()正下方的方法bounds.extend()上步骤#2方法。) // fits map map.fitBounds(bounds); Here's a working fiddle that's based on your code.(这是根据您的代码工作的小提琴 。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...