谷歌地图Javascript问题有两个函数

我正在尝试(不成功(将两个javascript示例合并为一个。

其中一个，以谷歌地图作为底图从cartoDB加载一些数据，另一个是谷歌地图搜索框。地图加载正常，但搜索框没有任何作用，就像我没有将框链接到函数一样。

独立，函数 initAutocomplete 的代码有效，当我将其与 main 函数结合使用时它不起作用(因为什么都没有发生(。

<!DOCTYPE html>
<html>
  <head>
    <title>Mapping</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->3ae
  </head>
  
  
  <body>
      <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>

    <!-- include google maps library *before* load cartodb.js -->
    <script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?v=3&amp;key=XXXXXXXXXXXXXXXXx"></script>
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>
    <script> 
    
    
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 = [];
  // [START region_getplaces]
  // 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);
  });
  }
  
  // [END region_getplaces]
      </script>
      
      
      
    <script>
    function main() {
          var map;
          // create google maps maps
          var mapOptions = {
            zoom: 10,
            rotateControl: true,
            rotateControlOptions: true,
            streetViewControl: true,
            scaleControl: true,
            center: new google.maps.LatLng(53.408, -2.1674),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);
                
                var url1 = 'https://XXXXX.cartodb.com/api/v2/viz/57963390-c37b-11e5-9814-0ecfd53eb7d3/viz.json';
                var url2 = 'https://XXXXX.cartodb.com/api/v2/viz/c0ab0f9c-c69e-11e5-94b0-0e3ff518bd15/viz.json'; 
                var url3 = 'https://XXXXX.cartodb.com/api/v2/viz/9f047b2a-c69f-11e5-bbf8-0e674067d321/viz.json';
          
            var options = {
             cartodb_logo: false,
            layer_selector: true,
            legends: true,
          }
           
          cartodb.createLayer(map, url1)
            .addTo(map, 0) // ultimately not displayed
            .done(function (layer) {
                console.log('added url1 ',url1);
                
                
            cartodb.createLayer(map, url2)
            .addTo(map, 1) // ultimately not displayed
            .done(function (layer) {
                console.log('added url2 ',url2);    
                
    
                
          
          cartodb.createLayer(map, url3)
            .addTo(map, 2) // displays OK
            .done(function (layer) {
                    console.log('added url3 ',url3);
                
                        })
                .error(function (){
                    console.log('problem adding 1st layer');
                });
        
        
        
                })
                .error(function (){
                    console.log('problem adding 2nd layer');
                });

            })
            .error(function () {
                console.log('problem adding 3rd layer!');
            });
            
      }
      
      window.onload = main;
      
      </script>
    
  </body>
</html>

您不包括地点库。

  <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=XXXXXXXXXXXXXXXXx"></script>

而且您没有运行initAutocomplete函数。

如果你按照写法运行它，你将创建两个map对象，你需要把它修改为在你的main函数中创建的map。一个选项：

function initAutocomplete(map) {
  // 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 = [];
  // [START region_getplaces]
  // 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);
  });
}

概念验证小提琴

代码片段：(cartdb 的东西不起作用，因为您提供的代码不起作用......

function initAutocomplete(map) {
    // 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 = [];
    // [START region_getplaces]
    // 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);
    });
  }
  // [END region_getplaces]
function main() {
  // create google maps maps
  var mapOptions = {
    zoom: 10,
    rotateControl: true,
    rotateControlOptions: true,
    streetViewControl: true,
    scaleControl: true,
    center: new google.maps.LatLng(53.408, -2.1674),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  initAutocomplete(map);
  var url1 = 'https://XXXXX.cartodb.com/api/v2/viz/57963390-c37b-11e5-9814-0ecfd53eb7d3/viz.json';
  var url2 = 'https://XXXXX.cartodb.com/api/v2/viz/c0ab0f9c-c69e-11e5-94b0-0e3ff518bd15/viz.json';
  var url3 = 'https://XXXXX.cartodb.com/api/v2/viz/9f047b2a-c69f-11e5-bbf8-0e674067d321/viz.json';
  var options = {
    cartodb_logo: false,
    layer_selector: true,
    legends: true,
  }
  cartodb.createLayer(map, url1)
    .addTo(map, 0) // ultimately not displayed
    .done(function(layer) {
      console.log('added url1 ', url1);
      cartodb.createLayer(map, url2)
        .addTo(map, 1) // ultimately not displayed
        .done(function(layer) {
          console.log('added url2 ', url2);
          cartodb.createLayer(map, url3)
            .addTo(map, 2) // displays OK
            .done(function(layer) {
              console.log('added url3 ', url3);
            })
            .error(function() {
              console.log('problem adding 1st layer');
            });
        })
        .error(function() {
          console.log('problem adding 2nd layer');
        });
    })
    .error(function() {
      console.log('problem adding 3rd layer!');
    });
}
window.onload = main;

html,
body,
#map {
  height: 100%;
  padding: 0;
  margin: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>
<link href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" rel="stylesheet" />
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>

相关内容

最新更新

热门标签：