堆栈内存溢出
  繁体   English   中英

谷歌地图适合不同边界的屏幕位置

[英]Google maps fit location to screen with different bounds

 原文  2019-11-29 16:40:49  7   1    javascript/ google-maps/ autocomplete/ googleplacesautocomplete

问题描述

首先，我一直在网上检查，但我找不到答案。

我将自动完成与 goole 地图结合起来，如果用户想要，他/她也可以移动标记，我从中获取地址。 您可以在下面找到代码。

当用户搜索例如法国尼斯时，是否可以将尼斯从例如边界到我的地图？ 也许我必须动态更改缩放比例或者我需要设置新的视口，我不确定。 到目前为止，我发现的是，我可以给出一个距离并创建一个圆以使该圆适合视口。 但是圆的半径是设置的，所以它可以适合Nice但不能适合Miami。

希望我能解释我的意思。 先感谢您。

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
            #map_canvas {
                width: 980px;
                height: 500px;
            }
            #current {
                padding-top: 5px;
            }
        </style>
    </head>
    <body>
        <label>Enter address:</label><br>
        <input id="searchTextField" type="text" size="50" style="margin-bottom: 20px;">
        <section>
            <div id='map_canvas' style=""></div>
            <div id="current">No info...</div>
        </section>

        <div style="margin-top: 10px;" id="data_area">

        </div>

        <script>
            function initMap() {
                var map = new google.maps.Map(document.getElementById('map_canvas'), {
                    zoom: 10,
                    center: new google.maps.LatLng(41.0082, 28.9784),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var myMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(41.0082, 28.9784),
                    draggable: true
                });
                var geocoder = new google.maps.Geocoder;
                var markers = [];
                markers.push(myMarker);

                var input = document.getElementById('searchTextField');
                var autocomplete = new google.maps.places.Autocomplete(input);

                map.addListener('idle', function() {
                    console.log(map.getBounds());
                    var bounds = map.getBounds();
                    var ne = bounds.getNorthEast();
                    var sw = bounds.getSouthWest();


                });

                google.maps.event.addListener(autocomplete, 'place_changed', function () {
                    for (var i = 0; i < markers.length; i++) {
                        markers[i].setMap(null);
                    }
                    markers = [];

                    var place = autocomplete.getPlace();

                    var myMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()),
                        draggable: true
                    });

                    markers.push(myMarker);
                    map.setCenter(myMarker.position);
                    myMarker.setMap(map);

                    google.maps.event.clearListeners(myMarker, 'dragend');
                    google.maps.event.clearListeners(myMarker, 'dragstart');

                    drag(myMarker, geocoder, map);

                }); 

                drag(myMarker, geocoder, map);

                map.setCenter(myMarker.position);
                myMarker.setMap(map);
            }

            function drag(myMarker, geocoder, map) {
                geocodeLatLng(geocoder, map, myMarker.getPosition().lat(), myMarker.getPosition().lng());
                google.maps.event.addListener(myMarker, 'dragend', function (evt) {
                    document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + ' Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
                    geocodeLatLng(geocoder, map, evt.latLng.lat(), evt.latLng.lng());
                });

                google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
                    document.getElementById('current').innerHTML = '<p>Waiting...</p>';
                });
            }
            function geocodeLatLng(geocoder, map, lat, lng) {
                var input = lat + "," + lng;
                var latlngStr = input.split(',', 2);
                var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
                geocoder.geocode({'location': latlng}, function(results, status) {
                  if (status === 'OK') {
                    if (results[0]) {
                        console.log(results[0])
                      var data_arr = []



                      document.getElementById("data_area").innerHTML = "";

                      var data_country = results[0].address_components.find(function(element) { 
                        return element.types[0] == "country"; 
                      }); 
                      var data_administrative_1 = results[0].address_components.find(function(element) { 
                        return element.types[0] == "administrative_area_level_1"; 
                      }); 
                      var data_administrative_2 = results[0].address_components.find(function(element) { 
                        return element.types[0] == "administrative_area_level_2"; 
                      }); 
                      var data_administrative_3 = results[0].address_components.find(function(element) { 
                        return element.types[0] == "administrative_area_level_3"; 
                      }); 
                      var data_administrative_4 = results[0].address_components.find(function(element) { 
                        return element.types[0] == "administrative_area_level_4"; 
                      }); 
                      var data_route = results[0].address_components.find(function(element) { 
                        return element.types[0] == "route"; 
                      }); 

                      if (data_route !== undefined) {data_arr.push(data_route["long_name"]);}
                      if (data_administrative_4 !== undefined) {data_arr.push(data_administrative_4["long_name"]);}
                      if (data_administrative_3 !== undefined) {data_arr.push(data_administrative_3["long_name"]);}
                      if (data_administrative_2 !== undefined) {data_arr.push(data_administrative_2["long_name"]);}
                      if (data_administrative_1 !== undefined) {data_arr.push(data_administrative_1["long_name"]);}
                      if (data_country !== undefined) {data_arr.push(data_country["long_name"]);}

                        data_arr.forEach(function(data) { 
                            var node = document.createElement("LI"); 
                            var textnode = document.createTextNode(data);
                            node.appendChild(textnode);
                            document.getElementById("data_area").appendChild(node);
                        });
                    } else {
                      window.alert('No data!');
                    }
                  } else {
                    window.alert('Geocoder failed: ' + status);
                  }
                });
            }

        </script>

        <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY&callback=initMap"></script>

    </body>
</html>

1 个解决方案

解决方案1
 1 已采纳  2019-11-30 19:44:04

Autocomplete服务返回所选位置的几何图形，缩放地图以显示这些边界（在小提琴/片段中，我添加了一个矩形以显示返回的边界，如果您不想显示，请将其删除）：

  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else if (place.geometry.bounds) {
    map.fitBounds(place.geometry.bounds);
  }

概念证明小提琴

结果地图的屏幕截图 

 html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } #map_canvas { width: 100%; height: 80%; } #current { padding-top: 5px; }
 <label>Enter address:</label><br> <input id="searchTextField" type="text" size="50" style="margin-bottom: 20px;"> <section style="width: 100%; height:100%;"> <div id='map_canvas' style=""></div> <div id="current">No info...</div> </section> <div style="margin-top: 10px;" id="data_area"></div> <script> var rect; var map; function initMap() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 10, center: new google.maps.LatLng(41.0082, 28.9784), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(41.0082, 28.9784), draggable: true }); var geocoder = new google.maps.Geocoder; var markers = []; markers.push(myMarker); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); map.addListener('idle', function() { console.log(map.getBounds()); var bounds = map.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); }); google.maps.event.addListener(autocomplete, 'place_changed', function() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); if (rect && rect.setMap) rect.setMap(null); rect = new google.maps.Rectangle({ map: map, bounds: place.geometry.viewport }) } else if (place.geometry.bounds) { map.fitBounds(place.geometry.bounds); if (rect && rect.setMap) rect.setMap(null); rect = new google.maps.Rectangle({ map: map, bounds: place.geometry.bounds }) } var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()), draggable: true }); markers.push(myMarker); map.setCenter(myMarker.position); myMarker.setMap(map); google.maps.event.clearListeners(myMarker, 'dragend'); google.maps.event.clearListeners(myMarker, 'dragstart'); drag(myMarker, geocoder, map); }); drag(myMarker, geocoder, map); map.setCenter(myMarker.position); myMarker.setMap(map); } function drag(myMarker, geocoder, map) { geocodeLatLng(geocoder, map, myMarker.getPosition().lat(), myMarker.getPosition().lng()); google.maps.event.addListener(myMarker, 'dragend', function(evt) { document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + ' Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'; geocodeLatLng(geocoder, map, evt.latLng.lat(), evt.latLng.lng()); }); google.maps.event.addListener(myMarker, 'dragstart', function(evt) { document.getElementById('current').innerHTML = '<p>Waiting...</p>'; }); } function geocodeLatLng(geocoder, map, lat, lng) { var input = lat + "," + lng; var latlngStr = input.split(',', 2); var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) }; geocoder.geocode({ 'location': latlng }, function(results, status) { if (status === 'OK') { if (results[0]) { console.log(results[0]) var data_arr = [] document.getElementById("data_area").innerHTML = ""; var data_country = results[0].address_components.find(function(element) { return element.types[0] == "country"; }); var data_administrative_1 = results[0].address_components.find(function(element) { return element.types[0] == "administrative_area_level_1"; }); var data_administrative_2 = results[0].address_components.find(function(element) { return element.types[0] == "administrative_area_level_2"; }); var data_administrative_3 = results[0].address_components.find(function(element) { return element.types[0] == "administrative_area_level_3"; }); var data_administrative_4 = results[0].address_components.find(function(element) { return element.types[0] == "administrative_area_level_4"; }); var data_route = results[0].address_components.find(function(element) { return element.types[0] == "route"; }); if (data_route !== undefined) { data_arr.push(data_route["long_name"]); } if (data_administrative_4 !== undefined) { data_arr.push(data_administrative_4["long_name"]); } if (data_administrative_3 !== undefined) { data_arr.push(data_administrative_3["long_name"]); } if (data_administrative_2 !== undefined) { data_arr.push(data_administrative_2["long_name"]); } if (data_administrative_1 !== undefined) { data_arr.push(data_administrative_1["long_name"]); } if (data_country !== undefined) { data_arr.push(data_country["long_name"]); } data_arr.forEach(function(data) { var node = document.createElement("LI"); var textnode = document.createTextNode(data); node.appendChild(textnode); document.getElementById("data_area").appendChild(node); }); } else { window.alert('No data!'); } } else { window.alert('Geocoder failed: ' + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在不同大小的Google地图上设置边界 谷歌地图：重新定义中心点，适合特定区域的界限 Google地图中的fitbounds（）api V3不适合边界 Google Maps API和Google Maps位置在PHP中显示了不同的位置 Google Maps Bounds不准确 谷歌地图边界不起作用 带有不同onclick地址的Google Maps位置 Google地图会在点击时加载默认位置和不同位置 如何使Google地图适合移动设备屏幕 在调整大小时适合Google Maps中的边界
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM