Google maps 谷歌地图API上的搜索框_Google Maps_Google Maps Api 3

Google maps 谷歌地图API上的搜索框

google-maps google-maps-api-3

Google maps 谷歌地图API上的搜索框,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我试图在我的地图上放置一个搜索框，但一直失败。我已经尝试使用一些站点的示例代码：；这里：；这里：；还有这里的教程：。但我似乎无法让它工作，现在我的地图甚至无法显示为了充分解释，我正在尝试制作一个地图，显示一个可以切换的kml，一个可以由用户拖动的标记，显示标记所在位置的坐标，以及一个搜索框来搜索地址或坐标……这仍然是我无法理解的最后，我希望将搜索框和kml开关移到地图上，而不是移到地图外面我对这一点很陌生，所以我为自己缺乏经验提前道歉。任何帮助都将不胜感激非工作代码如下： <hea

我试图在我的地图上放置一个搜索框，但一直失败。我已经尝试使用一些站点的示例代码：；这里：；这里：；还有这里的教程：。但我似乎无法让它工作，现在我的地图甚至无法显示

为了充分解释，我正在尝试制作一个地图，显示一个可以切换的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>

你的地图不会显示吗？你有什么JS错误吗？这是一种尝试在数组上循环的奇怪方式：对于vari=0，使用marker；标记=标记[i]；i++第二部分通常是while条件，而不是像marker=markers[i]Try for var i=0这样的赋值；i.长度；i++{markers[i].setMapnull；类似于位置数组上的循环。@duncan-感谢您的回复。它似乎仍然不起作用。我从中获得了特定的代码。可能是我把它放错了位置或什么的？地图只是没有显示。搜索框和切换以及GPS坐标信息出现了…但是地图丢失了。没有错误，我很抱歉知道。在我开始尝试添加搜索框之前，地图工作正常。