加入搜索框&;删除谷歌地图API Javascript中的标记

加入搜索框&;删除谷歌地图API Javascript中的标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我对Javascript一无所知。我有一个项目,使一个程序(基于网页)连接到谷歌地图 我读过developer.google.com,并一直坚持下去。 请帮助我,如何连接两个示例代码place search box()和marker remove() 谢谢 更新:这是我的代码(现在) 放置搜索框 html,正文{ 身高:100%; 保证金:0; 填充:0; } #地图{ 身高:100%; } .控制{ 边缘顶部:10px; 边框:1px实心透明; 边界半径:2px 0 0 2px; 框大小:

我对Javascript一无所知。我有一个项目,使一个程序(基于网页)连接到谷歌地图

我读过developer.google.com,并一直坚持下去。 请帮助我,如何连接两个示例代码place search box()和marker remove()

谢谢

更新:这是我的代码(现在)


放置搜索框
html,正文{
身高:100%;
保证金:0;
填充:0;
}
#地图{
身高:100%;
}
.控制{
边缘顶部:10px;
边框:1px实心透明;
边界半径:2px 0 0 2px;
框大小:边框框;
-moz框大小:边框框;
高度:32px;
大纲:无;
盒影:0 2px 6px rgba(0,0,0,0.3);
}
#pac输入{
背景色:#fff;
字体系列:Roboto;
字体大小:15px;
字体大小:300;
左边距:12px;
填充:0 11px 0 13px;
文本溢出:省略号;
宽度:300px;
}
#pac输入:焦点{
边框颜色:#4d90fe;
}
.pac集装箱{
字体系列:Roboto;
}
#类型选择器{
颜色:#fff;
背景色:#4d90fe;
填充:5px11px 0px 11px;
}
#类型选择器标签{
字体系列:Roboto;
字体大小:13px;
字体大小:300;
}
#目标{
宽度:345px;
}
#浮动面板{
位置:绝对位置;
顶部:10px;
左:25%;
z指数:5;
背景色:#fff;
填充物:5px;
边框:1px实心#999;
文本对齐:居中;
字体系列:“Roboto”,“sans-serif”;
线高:30px;
左侧填充:10px;
}
//本例使用Google Place Autocomplete将搜索框添加到地图中
//特色。人们可以进入地理搜索。搜索框将返回一个
//包含位置和预测搜索词组合的拾取列表。
//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如:
// 
函数initAutocomplete(){
var-Markerr=[];
var map=new google.maps.map(document.getElementById('map'){
中心:{lat:-7.266813,lng:112.770218},
缩放:13,
mapTypeId:“路线图”
});
//创建搜索框并将其链接到UI元素。
var input=document.getElementById('pac-input');
var searchBox=newgoogle.maps.places.searchBox(输入);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(输入);
//将搜索框结果偏向当前地图的视口。
addListener('bounds_changed',function(){
searchBox.setBounds(map.getBounds());
});
var标记=[];
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener('places\u changed',function(){
var places=searchBox.getPlaces();
如果(places.length==0){
返回;
}
//清除旧的标记。
markers.forEach(函数(marker){
marker.setMap(空);
});
标记=[];
//对于每个位置,获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds();
地点。forEach(功能(地点){
如果(!place.geometry){
log(“返回的位置不包含几何图形”);
返回;
}
变量图标={
url:place.icon,
大小:新谷歌地图大小(71,71),
来源:新google.maps.Point(0,0),
主播:新google.maps.Point(17,34),
scaledSize:new google.maps.Size(25,25)
};
//为每个地方创建一个标记。
markers.push(新的google.maps.Marker)({
地图:地图,
图标:图标,
标题:place.name,
位置:place.geometry.location
}));
if(place.geometry.viewport){
//只有地理代码具有视口。
联合(place.geometry.viewport);
}否则{
扩展(place.geometry.location);
}
});
映射边界(bounds);
});
// -----------------------------
//单击映射时,此事件侦听器将调用addMarker()。
map.addListener('click',函数(事件){
添加标记(事件标记);
});
//在地图的中心添加标记。
addMarker(haightAshbury);
// *********************************
}
//将标记添加到地图并推送到阵列。
功能添加标记(位置){
var marker=new google.maps.marker({
位置:位置,,
地图:地图
});
Markerr.push(标记器);
}
//设置数组中所有Markerr的映射。
函数setMapOnAll(映射){
对于(变量i=0;i
发布的javascript中有错误

  • 未捕获引用错误:未定义haightAshbury
  • 未捕获引用错误:未定义Markerr
  • <