Google Maps Searchbox Positioning (库角度-google-map)

Question

我尝试定位Google Maps searchbox变量。一个列表显示了所有的标记，在这些标记下应该有搜索框。随着列表的增长，搜索框向下移动。我使用这个库：Angular Google Maps有一个名为<ui-gmap-search-box>的指令。但它必须在<div id="map_canvas"> </div>内，而列表在该div之外。

Answer 1

我认为您应该使用Google Maps API提供的自定义控制函数。

您可以将控件放置在地图的左上角，并为控件创建单击事件侦听器，然后在那里执行您的工作。

有关自定义控件的详细信息，请参阅documentation。

此外，我对this sample进行了一些快速更改，并在此创建了此示例。希望能有所帮助。

​

var map;
//var chicago = new google.maps.LatLng(41.85, -87.65);

/**
 * The CenterControl adds a control to the map that recenters the map on Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
controlUIs = [];

function CenterControl(controlDiv, map) {


  locations = [new google.maps.LatLng(37.7833, -122.4167),
    new google.maps.LatLng(37.3382, -121.8863),
    new google.maps.LatLng(37.4223662, -122.0839445),
    new google.maps.LatLng(37.8694772, -122.2577238),
    new google.maps.LatLng(37.7919615, -122.2287941),
    new google.maps.LatLng(37.6256441, -122.0413544)
  ];
  for (var i = 0; i < locations.length; i++) {
    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to recenter the map';
    controlUIs[i] = controlUI;
    controlDiv.appendChild(controlUIs[i]);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '16px';
    controlText.style.lineHeight = '38px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = 'Location ' + i;
    controlText.location = locations[i];
    controlUIs[i].appendChild(controlText);


    // Setup the click event listeners: simply set the map to
    // Chicago
    google.maps.event.addDomListener(controlUIs[i], 'click', function(click) {
      map.setCenter(click.target.location)
    });
  }

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(37.6326196, -122.1568744)

  }
  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and
  // call the CenterControl() constructor passing
  // in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

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

​

Answer 2

我使用的是Google Maps API搜索框，而不是库的搜索框。

main.js：

var searchBox = function() {
  var input = document.getElementById('autocomplete');

  var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {
  });

}; // end searchBox

在$scope.init()中执行函数searchBox()。

index.html：

<input id="autocomplete" ng-model="newPlace" type="text">