Question

我正在尝试将搜索框放到我的地图上，但它仍然失败。我尝试使用来自几个网站的示例代码（此处：How to add Google Maps Autocomplete search box?;此处：How to integrate SearchBox in Google Maps JavaScript API v3?;此处：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox;以及此处的教程：https://www.youtube.com/watch?v=lSdM3yZkj1w）。但我似乎无法使其发挥作用，现在我的地图甚至无法显示。

为了完整解释，我正在尝试制作一个显示kml（可以切换）的地图，一个可以被用户拖动的标记（显示标记所在的坐标）和搜索用于搜索地址或坐标的框（......这仍然是我的意思）。

最后，我希望将搜索框和kml切换到地图上而不是外面。

我对此非常陌生，所以我因缺乏经验而提前道歉。任何帮助将不胜感激！

以下非工作代码：

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
  <script type="text/javascript">
    var map = null;
    var geocoder = new google.maps.Geocoder();
    var layers=[];
    layers[0] = new  google.maps.KmlLayer("https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml",
    {preserveViewport: true});

function toggleLayers(i)
{
    if(layers[i].getMap()==null){
       layers[i].setMap(map);
    }
    else {
       layers[i].setMap(null);
    }
}

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-23.742023, 29.462218);
  var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074);
  map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 7,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var marker = new google.maps.Marker({
    position: markerPosition,
    title: 'Point A',
    map: map,
    draggable: true
  });

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('DRAGGING...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('DRAGGING...');
    updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY');
    geocodePosition(marker.getPosition());
  });

}

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-25.43029134371126, 25.979551931249944),
  new google.maps.LatLng(-21.919517708560267, 32.164854665624944));

var options = {
 bounds: defaultBounds
 };

var input = document.getElementById('pac-input');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

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

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

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

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

google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}

 // Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
  width: 1000px;
  height: 500px;
  float: top;
}
#infoPanel {
  float: top;
  margin-left: 10px;
}
#infoPanel div {
  margin-bottom: 5px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="SEARCH">
<div id="map-canvas"></div>
CLICK TO DISPLAY ZONES <input type="checkbox" id="CLICK TO HUNTING ZONES" onclick="toggleLayers(0);"/>
<div id="mapCanvas"></div>
<div id="infoPanel">
<div id="address"></div>
<b>MARKER STATUS:</b>
<div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i>
</div>
<b>GPS CO-ORDINATES:</b>
<div id="info"></div>

Google Maps API上的搜索框

0 个答案: