搜索街道只是一个城市+州Google Maps API

时间:2015-11-05 02:43:32

标签: javascript jquery google-maps-api-3

我正在使用Google Maps API,我有一个疑问:我怎样才能看到一条街道只是一个城市?如果在特定城市找不到那条路,那么什么都不会发生......

我基本上有三个输入: a选择状态,另一个选择状态的城市,以及输入文本到街道

我的代码:

<div class="form-group">
<fieldset>
    <label>Estado</label>
    <select class="form-control" id="estado" name="estado">
    <option id="padraoEstado">Selecione um estado</option>
    <?php 
        $sql = "SELECT * FROM tb_estados";
        $query = $conn->query($sql);
        while($post = $query->fetch_assoc()){ 
        ?>
            <option value="<?php echo $post['ID_state']; ?>"><?php echo $post['uf']; ?> </option>
        <?php
        }
        ?>
    </select> 
    <script type="text/javascript">
        $(document).ready(function(){
            $("#estado").change(function(){
                $("#endereçoEmpresa").val("");
                $("#padraoEstado").remove();
                var valorEstado = $('#estado option:selected').val();
                $.ajax({
                    url: "carregarCidades.php",
                    type: "POST",
                    dataType: "html",
                    data:{
                        valorEstado: valorEstado
                    },
                    success: function(data){
                        $("#cidade").removeAttr("disabled");
                        $("#cidade").append().html(data);
                        var valorCidade = $('#cidade option:selected').text();
                        $("#mapCompany").show();
                        marker = null;
                        initialize();
                        codeAddress();

                    },
                    error: function(data){
                        alert(data)
                    }
                });
            });
        });
    </script>
    <label>Cidade</label>
    <select disabled class="form-control" id="cidade" name="cidade">
    </select> 
</fieldset>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#cidade").change(function(){
        $("#endereçoEmpresa").val("");
        codeAddress();
    });

    $("#endereçoEmpresa").change(function(){    
        codeAddress();
    });
});
</script>
<div class="form-group">
    <label >Endereço da Empresa</label>
    <input type="text"  id="endereçoEmpresa" name="endereçoEmpresa" class="form-control" />
</div>
<script type="text/javascript">
var geocoder;
var map;
var marker;
 function initialize() {
    função para iniciar o mapa
}

function codeAddress(){
    var valorCidade = $('#cidade option:selected').text();
    var valorEstado = $('#estado option:selected').text();
    var valorEndereco = $("#endereçoEmpresa").val();
    var address = valorEndereco + ", " + valorCidade + " - " + valorEstado;

    geocoder.geocode( { 'address': address + ', Brasil', 'region': 'BR'}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
         if(!marker){
            marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
            }); 
         }else{
            marker.setPosition(results[0].geometry.location);
         }
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng()
        $("#lat").val(latitude);
        $("#lng").val(longitude);
      }else{
        alert("A API de mapas do Google não conseguiu achar esta localização por algum motivo: " + status);
      }
    });
}
</script>

0 个答案:

没有答案