Google Maps API v3-从搜索框中将Google Maps Circle放置为纬度/经度

Question

Fairly new to this as my code shows. 如我的代码所示，这是相当新的。 The code I have has been mainly taken from the Google Developers page for using the Google Maps API v3. 我的代码主要来自使用Google Maps API v3的Google Developers页面。

What I am trying to do is load a set amount of locations from a MySql database into Google Maps using PHP. 我正在尝试使用PHP将MySql数据库中的一定数量的位置加载到Google Maps中。 I would then like to be able to use the result lat/lng of a search box to place an editable circle on the map so that the user can change the radius and move the circle and see which locations are covered by the circle. 然后，我希望能够使用搜索框的经度/纬度在地图上放置一个可编辑的圆，以便用户可以更改半径并移动圆，并查看圆所覆盖的位置。 If the user does a new search I intend for the circle to be removed and replaced again at the new lat/lng from the search box. 如果用户进行了新的搜索，我打算删除该圆并在搜索框中以新的纬度/纬度再次替换该圆。

So far I have managed: 到目前为止，我已经设法：

To load locations from MySql into Google Maps using PHP 使用PHP将MySql中的位置加载到Google Maps中
Insert a search box which pans to the address found 插入一个搜索框，该搜索框平移到找到的地址
Enter an editable circle at a set lat/lng. 在设定的纬度/经度下输入可编辑的圆圈。 This is where I have come unstuck, as I would like the editable circle to be placed dynamically. 这是我无法解决的地方，因为我希望动态放置可编辑的圆圈。

Any help would be much appreciated. 任何帮助将非常感激。 Thank you. 谢谢。

21.01.2018 19:35 GMT: New example of code below taken from Google Maps Developer page, as the old version of code posted had a Php link to a MySQL database and could not be loaded by anyone else. 21.01.2018 19:35 GMT：下面的新代码示例摘自Google Maps Developer页面，因为所发布的旧版本代码具有指向MySQL数据库的Php链接，并且无法由其他任何人加载。 This is the search box example code from the Google Developers page ( https://developers.google.com/maps/documentation/javascript/examples/places-searchbox ) and I have added some very basic code to add an editable circle. 这是Google Developers页面（ https://developers.google.com/maps/documentation/javascript/examples/places-searchbox ）中搜索框的示例代码，我添加了一些非常基本的代码来添加可编辑的圆圈。

The idea again is that, when the user searches a location instead of a marker being placed on the map an editable circle is placed. 再次提出的想法是，当用户搜索位置而不是在地图上放置标记时，会放置一个可编辑的圆圈。 Each time a new location is searched for the editable circle is cleared from the map. 每次在新位置搜索可编辑圆圈时，都会从地图上清除该位置。 I would have an input box where the user enters the radius of the circle in metres. 我会有一个输入框，用户可以在其中输入以米为单位的圆的半径。 When the radius is entered into the box the radius of the circle changes to match it. 将半径输入到框中后，圆的半径将更改为与之匹配的半径。

New code: 新代码：

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <script>
      // This example adds a search box to a map, using the Google Place Autocomplete
      // feature. People can enter geographical searches. The search box will return a
      // pick list containing a mix of places and predicted search terms.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.

        //ADDING CIRCLE HERE - 21.01.20178 19:25PM GMT

        var circle = new google.maps.Circle ({
        map: map,
        center: new google.maps.LatLng (-33.856717, 151.215288),
        radius: 1000,
        strokeColor: "#00ff00",
        fillcolor: "red",
        editable: true
  });

        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

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

Answer 1

To move the circle to the first result from the SearchBox , set the center of the circle to the position of the results. 要将圆移到SearchBox的第一个结果，请将圆的中心设置为结果的位置。 Add this to the place_changed event processing: 将此添加到place_changed事件处理中：

if (index == 0) {
  circle.setCenter(place.geometry.location);
}

proof of concept fiddle 概念证明

code snippet: 代码段：

 function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: -33.8688, lng: 151.2195 }, zoom: 13, mapTypeId: 'roadmap' }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; var circle = new google.maps.Circle({ map: map, center: new google.maps.LatLng(-33.856717, 151.215288), radius: 1000, strokeColor: "#00ff00", fillcolor: "red", editable: true }); searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place, index) { if (!place.geometry) { console.log("Returned place contains no geometry"); return; } var icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); // center the circle on the first result if (index == 0) { circle.setCenter(place.geometry.location); } if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); } google.maps.event.addDomListener(window, "load", initAutocomplete);

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #description { font-family: Roboto; font-size: 15px; font-weight: 300; } #infowindow-content .title { font-weight: bold; } #infowindow-content { display: none; } #map #infowindow-content { display: inline; } .pac-card { margin: 10px 10px 0 0; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); background-color: #fff; font-family: Roboto; } #pac-container { padding-bottom: 12px; margin-right: 12px; } .pac-controls { display: inline-block; padding: 5px 11px; } .pac-controls label { font-family: Roboto; font-size: 13px; font-weight: 300; } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; } #pac-input:focus { border-color: #4d90fe; } #title { color: #fff; background-color: #4d90fe; font-size: 25px; font-weight: 500; padding: 6px 12px; } #target { width: 345px; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map"></div>

Google Maps API v3-从搜索框中将Google Maps Circle放置为纬度/经度

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-21 20:51:07

Google Maps API v3-从搜索框中将Google Maps Circle放置为纬度/经度

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-21 20:51:07

解决方案1
0 已采纳 2018-01-21 20:51:07