我的搜索没有在谷歌地图中显示他们的标记有啥问题？
Posted
技术标签:
【中文标题】我的搜索没有在谷歌地图中显示他们的标记有啥问题？【英文标题】：What's wrong with my search that doesn't display their marker in google map?我的搜索没有在谷歌地图中显示他们的标记有什么问题？ 【发布时间】：2019-06-18 10:21:44 【问题描述】：我创建了一个地方搜索谷歌地图，喜欢搜索学校类型的地方，我为私人和公共做了一个标记，搜索框有效，但是当我点击进入时，它不显示公共/私人学校，这是因为我的代码吗？在图标上？或标记？
唯一的问题是当我点击进入时，它不显示它的标记
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Search Box</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 100%;
/* Optional: Makes the sample page fill the window. */
html,
body
height: 100%;
margin: 0;
padding: 0;
#description
font-family: Roboto;
font-size: 15px;
font-weight: 300;
#infowindow-content .title
font-weight: bold;
#infowindow-content
display: none;
#map #infowindow-content
display: inline;
.pac-card
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
#pac-container
padding-bottom: 12px;
margin-right: 12px;
.pac-controls
display: inline-block;
padding: 5px 11px;
.pac-controls label
font-family: Roboto;
font-size: 13px;
font-weight: 300;
#pac-input
background-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;
#title
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
#target
width: 345px;
</style>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete()
var map = new google.maps.Map(document.getElementById('map'),
center:
lat: -33.8688,
lng: 151.2195
,
zoom: 13,
mapTypeId: 'roadmap'
);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function()
searchBox.setBounds(map.getBounds());
);
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function()
var places = searchBox.getPlaces();
if (places.length == 0)
return;
// Clear out the old markers.
markers.forEach(function(marker)
marker.setMap(null);
);
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place)
if (!place.geometry)
console.log("Returned place contains no geometry");
return;
var icons =
'Public school':
icon: 'http://i68.tinypic.com/xcnnz4.png'
,
'Private school':
icon: 'http://i67.tinypic.com/2utkz8k.png'
;
// Create a marker for each place.
markers.push(new google.maps.Marker(
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
));
if (place.geometry.viewport)
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
else
bounds.extend(place.geometry.location);
);
map.fitBounds(bounds);
);
initAutocomplete();
</script>
</body>
</html>
【问题讨论】：
我在发布的代码中收到一个 javascript 错误：Uncaught ReferenceError: icon is not defined。您希望您的代码如何选择正确的图标？您在搜索框中执行什么搜索？
公立学校或私立学校
i68.tinypic.com/xcnnz4.png --> 用于公立学校和i67.tinypic.com/2utkz8k.png --> 用于私立学校
这不能回答问题。您使用var icons = ...，然后在您的标记中使用icon: icon，这显然是未定义的。
同意，如何使用我的图标？ ://
【参考方案1】：
图标未声明。您需要检查输入以查看是否输入了私立或公立学校，然后相应地设置图标。
// Create a marker for each place.
var marker = new google.maps.Marker(
map: map,
title: place.name,
position: place.geometry.location
);
if(place.name.toLowerCase() === 'private school')
marker.setIcon('http://i67.tinypic.com/2utkz8k.png');
else if(place.name.toLowerCase() === 'public school')
marker.setIcon('http://i68.tinypic.com/xcnnz4.png');
markers.push(marker);
【讨论】：
以上是关于我的搜索没有在谷歌地图中显示他们的标记有啥问题？的主要内容，如果未能解决你的问题，请参考以下文章
按钮单击dialogFragment后如何在谷歌地图上添加标记？