【发布时间】：2015-06-09 12:55:04
【问题描述】：
我正在尝试向谷歌地图添加搜索栏。我已经在地图上叠加了一张图片，它可以工作，但是当我添加搜索栏功能时，它似乎不起作用。当我有谷歌地图的两个独立组件时，即它显示的叠加层，只是它显示的搜索框，但是当我结合这两个代码时，只有搜索栏显示并且它似乎不起作用。我试图 jsfiddle，但我也无法让它在那里工作。任何帮助将不胜感激
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent:
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
bacground-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px:
text-overflow: ellipsis;
width: 400px:
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var overlay;
testOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var markers = [];
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(39.25,-76.5),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var bounds21222 = { east: -76.443482, west: -76.540847, south: 39.214707, north: 39.293047}
var swBound = new google.maps.LatLng(bounds21222.south, bounds21222.west);
var neBound = new google.maps.LatLng(bounds21222.north, bounds21222.east);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'ratio.png';
overlay = new testOverlay(bounds, srcImage, map);
}
function testOverlay(bounds, image, map){
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
testOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.opacity = '0.75';
img.style.position = 'absolute'
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
testOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
testOverlay.prototype.updateBounds = function(bounds){
this.bounds_ = bounds;
this.draw();
};
testOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// 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)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
}):
markers.push(maker):
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
【问题讨论】：
标签： javascript google-maps google-maps-api-3