[英]Reloading google maps places API on checkbox change
Introduction 介绍
I'm using the google maps Places API for a website. 我正在使用Google Maps Places API来访问网站。 It lets a visitor see certain places near the location that he/she has chosen such as a bakery, cinema, school, busstation etc.
它使访问者可以看到他/她选择的位置附近的某些地方,例如面包店,电影院,学校,汽车站等。
The problem is that the google maps places API only gets about 20 results at most, which causes a lot of places to be missing from the map even though they're within the specified radius (700 in this case). 问题在于,Google Maps Places API最多最多只能获得20个结果,即使它们在指定的半径内(本例中为700个),这也会导致很多地方从地图上丢失。
What I came up with was using checkboxes to let the user select which places he/she wants to see. 我想到的是使用复选框让用户选择他/她想看的地方。
The concept is very simple. 这个概念很简单。 The user clicks a checkbox and (by using jquery) populates an array.
用户单击一个复选框,然后(使用jquery)填充一个数组。 This array is used to call the API and load in the markers.
该数组用于调用API并加载标记。
The Problem 问题
The map seems to reload (it "flickers") but it only shows me the grocery_or_supermarket places (which are by default enabled and in the array so the user doesn't see an empty map). 该地图似乎正在重新加载(“闪烁”),但只向我显示了杂货店或超市的位置(默认情况下处于启用状态,并且在数组中,因此用户看不到空的地图)。 I'm calling the
initialize()
function after changing a checkbox. 我在更改复选框后调用了
initialize()
函数。 It's not changing the markers on the map or adding new ones which is what I want. 它不是更改地图上的标记或添加新标记,这正是我想要的。
The Code 编码
<script>
var q = jQuery.noConflict();
var selected = ["grocery_or_supermarket"];
q( document ).ready(function( q ) {
q('.map-legenda').change(function() {
var selected = [];
q.each(q('.map-legenda input:checked'), function(a,b) {
selected.push(q(b).val());
});
console.log(selected);
initialize();
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script>
var map;
var infowindow;
function initialize() {
var _lat = "<?php print($lat); ?>";
var _long = "<?php print($long); ?>";
var home = new google.maps.LatLng(_lat, _long);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: home,
zoom: 15
});
var request = {
location: home,
radius: 750,
types: selected
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
var marker_home = new google.maps.Marker({
map: map,
position: home,
icon: 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/covers.png'
});
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
var grocery_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/grocerystore.png';
var school_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/school.png';
var gym_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/gym.png';
var treinstation_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/treinstation.png';
var bakery_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/bakery.png';
var bus_station_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/busstation.png';
var convenience_store_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/conv_store.png';
var movie_theater_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/bios.png';
var park_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/park.png';
var parking_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/parking.png';
function createMarker(place) {
var custom_icon;
if(place.types.indexOf('grocery_or_supermarket') != -1) {
custom_icon = grocery_icon;
} else if(place.types.indexOf('gym') != -1) {
custom_icon = gym_icon;
} else if(place.types.indexOf('train_station') != -1) {
custom_icon = treinstation_icon;
} else if(place.types.indexOf('school') != -1) {
custom_icon = school_icon;
} else if(place.types.indexOf('bakery') != -1) {
custom_icon = bakery_icon;
} else if(place.types.indexOf('bus_station') != -1) {
custom_icon = bus_station_icon;
} else if(place.types.indexOf('convenience_store') != -1) {
custom_icon = convenience_store_icon;
} else if(place.types.indexOf('movie_theater') != -1) {
custom_icon = movie_theater_icon;
} else if(place.types.indexOf('park') != -1) {
custom_icon = park_icon;
} else if(place.types.indexOf('parking') != -1) {
custom_icon = parking_icon;
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: custom_icon
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
<br/>
<ul class="map-legenda">
<li class="woning">
<img width="32" height="32" alt="Woning" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/covers.png">
<?php echo icl_t('custom','Woning','Woning');?>
</li>
<li class="supermarkt">
<img width="32" height="32" alt="Supermarkt" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/grocerystore.png">
<?php echo icl_t('custom','Supermarkt','Supermarkt');?><input type="checkbox" name="supermarkt" value="grocery_or_supermarket" checked>
</li>
<li class="parkeerplaats">
<img width="32" height="32" alt="<?php echo icl_t('custom','Parking','Parking');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/parking.png">
<?php echo icl_t('custom','Parking','Parking');?><input type="checkbox" name="parkeerplaats" value="parking">
</li>
<li class="fitness">
<img width="32" height="32" alt="Fitness" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/gym.png">
<?php echo icl_t('custom','Fitness','Fitness');?><input type="checkbox" name="fitness" value="gym">
</li>
<li class="school">
<img width="32" height="32" alt="School" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/school.png">
<?php echo icl_t('custom','School','School');?><input type="checkbox" name="school" value="school">
</li>
<li class="bakkerij">
<img width="32" height="32" alt="<?php echo icl_t('custom','Bakery','Bakery');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/bakery.png">
<?php echo icl_t('custom','Bakery','Bakery');?><input type="checkbox" name="bakkerij" value="bakery">
</li>
<li class="busstation">
<img width="32" height="32" alt="<?php echo icl_t('custom','Bus station','Bus station');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/busstation.png">
<?php echo icl_t('custom','Bus station','Bus station');?><input type="checkbox" name="busstation" value="bus_station">
</li>
<li class="park">
<img width="32" height="32" alt="<?php echo icl_t('custom','Park','Park');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/park.png">
<?php echo icl_t('custom','Park','Park');?><input type="checkbox" name="park" value="park">
</li>
<li class="bios">
<img width="32" height="32" alt="<?php echo icl_t('custom','Movie theater','Movie theater');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/bios.png">
<?php echo icl_t('custom','Movie theater','Movie theater');?><input type="checkbox" name="bios" value="movie_theater">
</li>
<li class="buurtwinkel">
<img width="32" height="32" alt="<?php echo icl_t('custom','Convenience store','Convenience store');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/conv_store.png">
<?php echo icl_t('custom','Convenience store','Convenience store');?><input type="checkbox" name="buurtwinkel" value="convenience_store">
</li>
<li class="treinstation">
<img width="32" height="32" alt="Trein" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/treinstation.png">
<?php echo icl_t('custom','Trein','Trein');?><input type="checkbox" name="treinstation" value="train_station">
</li>
</ul>
In Javascript, var
declares a new variable inside a certain scope. 在Javascript中,
var
在一定范围内声明一个新变量。 By declaring var selected = []
inside your change
handler, you created a new variable that was inaccessible to your initialize
function. 通过在
change
处理程序中声明var selected = []
,您创建了一个新的变量,您的initialize
函数无法访问该变量。 Removing the var
in your change handler causes it to modify the global selected
array. 在更改处理程序中删除
var
会导致它修改全局selected
数组。
As @duncan pointed out in a comment, perhaps a better way to achieve the same result would be to take selected
out of global scope and pass it as a parameter to initialize
. 作为@duncan在评论中指出,或许是一个更好的方法来达到同样的结果将是采取
selected
了全球范围内的,它作为参数传递给initialize
。
<script>
q( document ).ready(function( q ) {
q('.map-legenda').change(function() {
var selected = [];
q.each(q('.map-legenda input:checked'), function(a,b) {
selected.push(q(b).val());
});
console.log(selected);
initialize(selected);
});
});
</script>
<script>
var map;
var infowindow;
function initialize(selected) {
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.