Javascript 重新加载GoogleMaps会将API置于复选框更改位置_Javascript_Jquery_Google Maps Api 3

Javascript 重新加载GoogleMaps会将API置于复选框更改位置

javascript jquery google-maps-api-3

Javascript 重新加载GoogleMaps会将API置于复选框更改位置,javascript,jquery,google-maps-api-3,Javascript,Jquery,Google Maps Api 3,导言我正在为一个网站使用GoogleMapsPlacesAPI。它可以让游客看到他/她选择的地点附近的某些地方，如面包房、电影院、学校、公共汽车站等问题是google maps places API最多只能获得20个结果，这导致地图中的很多位置丢失，即使它们在指定的半径范围内（本例中为700个）我想到的是使用复选框让用户选择他/她想看的地方这个概念很简单。用户单击复选框并（通过使用jquery）填充数组。此数组用于调用API并加载标记问题地图似乎要重新加载（它“闪烁”），但它只显示杂

导言

我正在为一个网站使用GoogleMapsPlacesAPI。它可以让游客看到他/她选择的地点附近的某些地方，如面包房、电影院、学校、公共汽车站等

问题是google maps places API最多只能获得20个结果，这导致地图中的很多位置丢失，即使它们在指定的半径范围内（本例中为700个）

我想到的是使用复选框让用户选择他/她想看的地方

这个概念很简单。用户单击复选框并（通过使用jquery）填充数组。此数组用于调用API并加载标记

问题

地图似乎要重新加载（它“闪烁”），但它只显示杂货店或超市的位置（默认情况下是启用的，并且在数组中，因此用户不会看到空地图）。更改复选框后，我将调用

initialize（）

函数。这不是改变地图上的标记或添加新的标记，这正是我想要的

代码

<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>


var q=jQuery.noConflict（）；
所选变量=[“杂货店”或“超市”]；
q（文件）。就绪（功能（q）{
q（'.map legenda'）.change（函数（）{
所选var=[]；
q、 每个（q（'.map legenda input:checked'）、函数（a、b）{
selected.push（q（b）.val（））；
});
console.log（选中）；
初始化（）；
});
});
var映射；
var信息窗口；
函数初始化（）{
var_lat=“”；
var_long=“”；
var home=new google.maps.LatLng（_lat，_long）；
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：家，
缩放：15
});
var请求={
地点：家，
半径：750，
类型：选定
};
infowindow=new google.maps.infowindow（）；
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
var marker_home=new google.maps.marker({
地图：地图，
职位：首页，
图标：'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/covers.png'
});
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i


/lib/images/maps\u icons/cover.png“>


/lib/images/maps\u icons/grocerystore.png“>


/lib/images/maps\u icons/parking.png“>


/lib/images/maps\u icons/gym.png“>


/lib/images/maps\u icons/school.png“>


/lib/images/maps\u icons/bakery.png“>


/lib/images/maps\u icons/busstation.png“>


/lib/images/maps\u icons/park.png“>


/lib/images/maps\u icons/bios.png“>


/lib/images/maps\u icons/conv\u store.png“>


/lib/images/maps\u icons/treinstation.png“>

在Javascript中，

var

在某个范围内声明一个新变量。通过在

change

处理程序中声明

var selected=[]

，您创建了一个

initialize

函数无法访问的新变量。删除

var

<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) {
        ...