如何在CodeIgniter Google Maps V3 API库中显示地图中的自动完成功能?

时间:2015-06-08 05:49:48

标签: codeigniter google-maps google-maps-api-3

我正在使用CodeIgniter Google Maps V3 API库URL来选择表单中的位置。所以我的控制器如下:

$config['center'] = '37.4419, -122.1419';
$config['zoom'] = 'auto';
$config['places'] = TRUE;
$config['placesAutocompleteInputID'] = 'event_location';
$config['placesAutocompleteBoundsMap'] = TRUE; // set results biased towards the maps viewport
$config['placesAutocompleteOnChange'] = 'alert(\'You selected a place\');';

$this->googlemaps->initialize($config);

view是:

<div class="form-group">
    <label class="col-md-3 col-xs-12 control-label">Select Venue in google map</label>
    <div class="col-md-6 col-xs-12">                                                                                                                                     
        <?php 
            $google_map_date = array(
              'name'        => 'event_location',
              'type'        => 'text',
              'id'          => 'event_location',
              'class'       => 'form-control',
            );

        ?>
        <?php echo form_input($google_map_date);?>
        <span class="help-block"></span>                                        
    </div>
    <div class="col-md-12 col-xs-12">    
        <?php echo $map['html']; ?>
    </div>
</div>

虽然我可以自动选择位置,但地图未显示所选位置。我应该编码什么,以显示所选位置,而不仅仅是提醒You selected a place

1 个答案:

答案 0 :(得分:2)

以下是工作示例:

$config['placesAutocompleteOnChange'] = "

        markers_map[0].setVisible(false);
        var place = placesAutocomplete.getPlace();
        if (!place.geometry) {
          return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
          map.setZoom(15);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(15);
        }

        markers_map[0].setPosition(place.geometry.location);
        markers_map[0].setVisible(true);

        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
          ].join(' ');
        }

        ";