删除谷歌地图地点服务中的标记
Removing Markers In google Maps Places Services
当我单击银行时,所有银行图标应用程序以及单击停车和商店时,必填字段就会出现。
我的问题是当我点击停车时,其他标记不应该可见。
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=true&libraries=places"></script>
<script>
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
function initialize()
{
myCenter = new google.maps.LatLng(13.052413899999994,80.25065293862303);
map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myCenter,
zoom: 15
});
}
function some()
{
var request = {
location: myCenter,
radius: 500,
types: ['bank']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place)
{
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url:'bank.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
}
function parking()
{
var request = {
location: myCenter,
radius: 500,
types: ['parking']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url:'parking.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
}
function stores()
{
var request = {
location: myCenter,
radius: 1000,
types: ['store']
};
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: myCenter,
radius: 1000
};
var cityCircle = new google.maps.Circle(populationOptions);
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url:'store.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 50%; float:left"></div>
<div style="width:46%; float:left">
<button onclick="some();">Banks</button>
<button onclick="parking();">Parking</button>
<button onclick="stores();">Store</button>
</body>
</html>
将标记保存在数组中。 重新运行查询时,处理该数组,通过将标记的 map 属性设置为 null 来隐藏标记,然后删除它们。相关变更如下。
var markers = [];
function createMarker(place)
{
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url:'bank.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
markers.push(marker);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
工作示例(没有自定义图标)
在显示停车标记之前,请通过以下行删除银行标记。
marker.setMap(null);
相关文章:
- 调用谷歌地图路线服务时未捕获的异常
- 谷歌地图Javascript API与网络服务API
- 基于谷歌地图API方向服务构建的替代路线
- 谷歌应用程序脚本html服务和加载谷歌地图javascript api V3
- 如何在谷歌地图服务的Go客户端中使用方向响应
- 在谷歌地图中指定保存的路点's方向服务
- 将查询字符串参数与谷歌地图api v3服务结合使用
- 谷歌地图或其他服务,以获取指定范围内的地方列表
- 如何使用谷歌地图方向服务找到最近的标记
- 删除谷歌地图地点服务中的标记
- 谷歌地图API无法读取地方服务
- 将路线服务与谷歌地图中的自动完成服务结合使用
- 如何使用谷歌地图JavaScript API v3's Filter.js中的地理编码服务
- 谷歌地图方向服务有时会失败
- 谷歌地图不可见:asp.net mvc中的谷歌地图指导服务
- 谷歌地图地理编码服务访问控制允许原点错误
- 使用谷歌地图api在移动设备上的地理定位服务失败
- 用TypeScript编写的Geocoder谷歌地图服务的因果报应异步测试
- 谷歌地图Web服务API-显示地图上的方向结果
- 我不能从web服务返回数据到谷歌地图和创建标记