Question

我尝试（不成功）将两个javascript示例合并到一起。

其中一个，从Google地图加载一些数据，谷歌地图作为基本地图，另一个是谷歌地图搜索框。地图加载很好，但搜索框只是没有做任何事情，就像我没有将框链接到函数。

Standalone，函数initAutocomplete的代码可以工作，当我将它与main函数结合时（事情没有发生），它就没有了。

任何帮助将不胜感激！

谢谢，

＆＃13;

<!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>

＆＃13;

Answer 1

您不包括地方图书馆。

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

并且您没有运行initAutocomplete功能。

如果您按照书面形式运行它，您将创建两个地图对象，您需要将其修改为主函数中创建的地图。一个选择：

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);
  });
}

proof of concept fiddle

代码段（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>

谷歌地图Javascript问题有两个功能

1 个答案: