Question

以下是我用于网站的所有Javascript功能。基本上，load函数调用并处理来自PHP数据库的数据，因此我从那里创建并处理了一个地图。但是，我正在尝试向地图添加搜索栏，目前在选择约束时刷新地图，搜索框从地图的左上角消失。可以再次看到的唯一方法是刷新页面。它能够提取自动完成建议，并在所述位置上放置标记，并且可以选择更改地图并在其上放置更多标记的约束。但是，当选择约束时，搜索框将消失，地图位置也会在地图内发生变化。无论如何都要在地图中加入搜索框以在指定位置放置标记，并将该视图保留在该位置，即使从PHP传递数据以在地图上放置更多标记？我应该组合加载和初始化功能吗？从这张第一次海报中获得帮助将非常感激！

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

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};

function load() {

var markers = [];
var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(39.166531, -86.528549),
    zoom: 19,
    mapTypeId: 'roadmap'
        });

var passtypevalue = document.forms[0].passes.value;
var distancevalue = document.forms[0].distance.value;
var freevalue = document.forms[0].free.checked;
var metersvalue = document.forms[0].meters.checked;
var garagevalue = document.forms[0].garage.checked;
var campuspassvalue = document.forms[0].campuspass.checked;
var residentpassvalue = document.forms[0].residentpass.checked;

var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("form_action.php", 
function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {if (passtypevalue==markers[i].getAttribute("TypeOfPass") || 
    freevalue==markers[i].getAttribute("Free") || metersvalue==true || garagevalue==true || campuspassvalue==true || residentpassvalue==true){
      var spot = markers[i].getAttribute("SpotID");
      var type = markers[i].getAttribute("TypeOfPass");
      var free = markers[i].getAttribute("Free");
      var meter = markers[i].getAttribute("Meter");
      var garage = markers[i].getAttribute("Garage");
      var resident = markers[i].getAttribute("ResidentPass");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("Latitude")),
          parseFloat(markers[i].getAttribute("Longitude")));
      var html = "<b>" + spot + "</b> <br/>" + type;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
bindInfoWindow(marker, map, infoWindow, html);
      }}
    });

}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', 
function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });

}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

request.onreadystatechange = function() {
    if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
    }
};

request.open('GET', url, true);
request.send(null);
}
 up206b.initialize = function()
    {
        var latlng = new google.maps.LatLng(34.070264, -118.4440562);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    }
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

}）;

function doNothing() {}

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

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
  document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
  var image = {
    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.
  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
  });

  markers.push(marker);

  bounds.extend(place.geometry.location);
}

map.fitBounds(bounds);

}）;

  // [END region_getplaces]
  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);

}）; }

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

    </script>

使用自动填充功能添加Google地图搜索栏

0 个答案: