1. 技术文章
  2. Google Maps API: Heatmap & Search - Cannot merge into single map

Google Maps API: Heatmap & Search - Cannot merge into single map

由 ≯℡__Kan透↙ 提交于 2019-12-25 17:07:34

问题


I'm trying to work with Google maps and Twitter API's to generate a city searchable heatmap of a certain topic/keyword from twitter.

I have the heatmap working and the search map working individually, but cannot find anything any documentation on how to merge the two maps so one map has a heatmap that can search by city.

If you delete the &callback=initAutocomplete in:

 script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete"

This will show you the heatmap, but without the search bar. If you leave it in, it shows the search bar with the heatmap buttons. The search bar works but if you navigate to San Fransisco, there is no points on the heatmap.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        background-color: #fff;
        border: 1px solid #999;
        left: 25%;
        padding: 5px;
        position: absolute;
        top: 10px;
        z-index: 5;
      }

      #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: 300px;
      }

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

      .pac-container {
        font-family: Roboto;
      }
    </style>
  </head>

  <body>
    <div id="floating-panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map"></div>
    <script>

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

      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 37.775, lng: -122.434},
          mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          map: map
        });
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 20);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
      }

      // Heatmap data: 500 Points
      function getPoints() {
        return [
          new google.maps.LatLng(37.782551, -122.445368),
          new google.maps.LatLng(37.782745, -122.444586),
          new google.maps.LatLng(37.782842, -122.443688),
          new google.maps.LatLng(37.782919, -122.442815),
          new google.maps.LatLng(37.782992, -122.442112),
          new google.maps.LatLng(37.783100, -122.441461),
          new google.maps.LatLng(37.783206, -122.440829),
          new google.maps.LatLng(37.783273, -122.440324),
          new google.maps.LatLng(37.783316, -122.440023),
          new google.maps.LatLng(37.783357, -122.439794),
          new google.maps.LatLng(37.783371, -122.439687),
          new google.maps.LatLng(37.783368, -122.439666),
          new google.maps.LatLng(37.783383, -122.439594),
          new google.maps.LatLng(37.783508, -122.439525),
          new google.maps.LatLng(37.783842, -122.439591),
          new google.maps.LatLng(37.784147, -122.439668),
          new google.maps.LatLng(37.784206, -122.439686),
          new google.maps.LatLng(37.784386, -122.439790),
          new google.maps.LatLng(37.784701, -122.439902),
          new google.maps.LatLng(37.784965, -122.439938),
          new google.maps.LatLng(37.785010, -122.439947),
          new google.maps.LatLng(37.785360, -122.439952),
          new google.maps.LatLng(37.785715, -122.440030),
          new google.maps.LatLng(37.786117, -122.440119),
          new google.maps.LatLng(37.786564, -122.440209),
          new google.maps.LatLng(37.786905, -122.440270),
          new google.maps.LatLng(37.786956, -122.440279),
          new google.maps.LatLng(37.800224, -122.433520),
          new google.maps.LatLng(37.800155, -122.434101),
          new google.maps.LatLng(37.800160, -122.434430),
          new google.maps.LatLng(37.800378, -122.434527),
          new google.maps.LatLng(37.800738, -122.434598),
          new google.maps.LatLng(37.800938, -122.434650),
          new google.maps.LatLng(37.801024, -122.434889),
          new google.maps.LatLng(37.800955, -122.435392),
          new google.maps.LatLng(37.800886, -122.435959),
          new google.maps.LatLng(37.800811, -122.436275),
          new google.maps.LatLng(37.800788, -122.436299),
          new google.maps.LatLng(37.800719, -122.436302),
          new google.maps.LatLng(37.800702, -122.436298),
          new google.maps.LatLng(37.800661, -122.436273),
          new google.maps.LatLng(37.800395, -122.436172),
          new google.maps.LatLng(37.800228, -122.436116),
          new google.maps.LatLng(37.800169, -122.436130),
          new google.maps.LatLng(37.800066, -122.436167),
          new google.maps.LatLng(37.784345, -122.422922),
          new google.maps.LatLng(37.784389, -122.422926),
          new google.maps.LatLng(37.784437, -122.422924),
          new google.maps.LatLng(37.784746, -122.422818),
          new google.maps.LatLng(37.785436, -122.422959),
          new google.maps.LatLng(37.786120, -122.423112),
          new google.maps.LatLng(37.786433, -122.423029),
          new google.maps.LatLng(37.786631, -122.421213),
          new google.maps.LatLng(37.786660, -122.421033)
        ];
      }
    </script>
    <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: google.maps.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.
        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) {
            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 async defer
        src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete">
    </script>


  </body>
</html>

回答1:


You have two separate maps created in two separate initialization functions.

One option:

  1. remove one of the maps (making sure the remaining initialize function initializes the global map variable).

  2. call both initMap and initAutocomplete in an onload function (or combine them into a single function).

    google.maps.event.addDomListener(window, 'load', function() { initMap(); initAutocomplete() });

proof of concept fiddle (moved the SearchBox onto the floating panel)

code snippet:

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

var map, heatmap;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 37.775,
      lng: -122.434
    },
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius() {
  heatmap.set('radius', heatmap.get('radius') ? null : 20);
}

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

// Heatmap data: 500 Points
function getPoints() {
    return [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
      new google.maps.LatLng(37.782919, -122.442815),
      new google.maps.LatLng(37.782992, -122.442112),
      new google.maps.LatLng(37.783100, -122.441461),
      new google.maps.LatLng(37.783206, -122.440829),
      new google.maps.LatLng(37.783273, -122.440324),
      new google.maps.LatLng(37.783316, -122.440023),
      new google.maps.LatLng(37.783357, -122.439794),
      new google.maps.LatLng(37.783371, -122.439687),
      new google.maps.LatLng(37.783368, -122.439666),
      new google.maps.LatLng(37.783383, -122.439594),
      new google.maps.LatLng(37.783508, -122.439525),
      new google.maps.LatLng(37.783842, -122.439591),
      new google.maps.LatLng(37.784147, -122.439668),
      new google.maps.LatLng(37.784206, -122.439686),
      new google.maps.LatLng(37.784386, -122.439790),
      new google.maps.LatLng(37.784701, -122.439902),
      new google.maps.LatLng(37.784965, -122.439938),
      new google.maps.LatLng(37.785010, -122.439947),
      new google.maps.LatLng(37.785360, -122.439952),
      new google.maps.LatLng(37.785715, -122.440030),
      new google.maps.LatLng(37.786117, -122.440119),
      new google.maps.LatLng(37.786564, -122.440209),
      new google.maps.LatLng(37.786905, -122.440270),
      new google.maps.LatLng(37.786956, -122.440279),
      new google.maps.LatLng(37.800224, -122.433520),
      new google.maps.LatLng(37.800155, -122.434101),
      new google.maps.LatLng(37.800160, -122.434430),
      new google.maps.LatLng(37.800378, -122.434527),
      new google.maps.LatLng(37.800738, -122.434598),
      new google.maps.LatLng(37.800938, -122.434650),
      new google.maps.LatLng(37.801024, -122.434889),
      new google.maps.LatLng(37.800955, -122.435392),
      new google.maps.LatLng(37.800886, -122.435959),
      new google.maps.LatLng(37.800811, -122.436275),
      new google.maps.LatLng(37.800788, -122.436299),
      new google.maps.LatLng(37.800719, -122.436302),
      new google.maps.LatLng(37.800702, -122.436298),
      new google.maps.LatLng(37.800661, -122.436273),
      new google.maps.LatLng(37.800395, -122.436172),
      new google.maps.LatLng(37.800228, -122.436116),
      new google.maps.LatLng(37.800169, -122.436130),
      new google.maps.LatLng(37.800066, -122.436167),
      new google.maps.LatLng(37.784345, -122.422922),
      new google.maps.LatLng(37.784389, -122.422926),
      new google.maps.LatLng(37.784437, -122.422924),
      new google.maps.LatLng(37.784746, -122.422818),
      new google.maps.LatLng(37.785436, -122.422959),
      new google.maps.LatLng(37.786120, -122.423112),
      new google.maps.LatLng(37.786433, -122.423029),
      new google.maps.LatLng(37.786631, -122.421213),
      new google.maps.LatLng(37.786660, -122.421033)
    ];
  }
  // 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() {
  /* map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13,
    mapTypeId: google.maps.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.
  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) {
      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);
  });
}
google.maps.event.addDomListener(window, 'load', function() {
  initMap();
  initAutocomplete()
});
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  background-color: #fff;
  border: 1px solid #999;
  left: 25%;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 5;
}
#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: 300px;
}
#pac-input:focus {
  border-color: #4d90fe;
}
.pac-container {
  font-family: Roboto;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,visualization"></script>
<div id="floating-panel">
  <button onclick="toggleHeatmap()">Toggle Heatmap</button>
  <button onclick="changeGradient()">Change gradient</button>
  <button onclick="changeRadius()">Change radius</button>
  <button onclick="changeOpacity()">Change opacity</button>
  <input id="pac-input" class="controls" type="text" placeholder="Search Box">

</div>
<div id="map"></div>


来源：https://stackoverflow.com/questions/36345303/google-maps-api-heatmap-search-cannot-merge-into-single-map

标签
javascript
google-maps
google-maps-api-3
heatmap
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!