谷歌地图api v3覆盖图像与搜索栏
Google Maps api v3 overlay image with search Bar
我正在尝试添加一个搜索栏到谷歌地图。我已经覆盖了一个图像到地图上，它的工作原理，但当我添加搜索栏功能，它似乎不工作。当我有两个独立的组件为谷歌地图，即只是覆盖它显示，只是搜索框它显示，但当我结合两个代码，只有搜索栏显示，它似乎不起作用。我试过了，但我也不能让它在那里工作。如有任何帮助，不胜感激
<!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>
将SearchBox的初始化移到initialize函数中。初始化函数在创建DOM后触发window onload事件时运行。在此之前(当它当前运行时)，无法找到它正在查找的<input>。
你也有一堆语法错误(":"应该是";")
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);
// 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);
});
}
相关文章：
- JQuery中的活动搜索栏
- 如何让typeahead在我的搜索栏中填充自定义参数
- Imgur API图像搜索未返回数据
- 是否有其他人在设计Twitter Typeahead时遇到问题'的搜索栏
- Javascript中的搜索栏-部分匹配字符串
- 将图像添加到 json 搜索栏
- 显示移动窗口时引导导航栏中的 atach 搜索栏
- JS中使用滑块的音频搜索栏
- 我怎样才能得到这个“;搜索栏”;使用jquery
- 如何在谷歌图像搜索api v2中获取图像url
- 图像搜索功能
- 我的搜索栏与YouTube API不同步
- 使用 json ajax javascript jquery 和 java 的自动完成搜索栏(无 PHP）
- 是否有用于以最佳间距在行中显示图像搜索结果的 js 库
- 角度:需要搜索栏在 2 个不同的 ng 重复上工作
- 如何使用 jQuery 或 CSS3 使搜索栏响应式
- 为 Web 应用程序创建图像工具栏
- JavaScript Auto Complete 搜索栏修改帮助
- 谷歌地图api v3覆盖图像与搜索栏
- 不能将搜索栏放置在标题图像的右侧
