在Biostall-google-maps-V3 API库问题中使用latlong json数据显示标记

时间:2015-09-21 20:04:05

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

我有一个简单的AJAX,可以通过我的控制器从MYSQL获取所有数据,然后在搜索时以纬度和经度显示所有数据:

$(document).ready(function () {
    $("#searchDataToMarker").keyup(function () {
        var value = $(this).val();
        $.ajax({
            type: "POST",
            url: "<?php echo base_url('Maps/mapSearchDataInMarker') ?>",
            data: {
                'searchDataToMarker': value
            },
            dataType: "JSON",
            success: function (searchMapDataResult) {
                if (searchMapDataResult.length !== null || $('searchDataToMarker').value !== '' || searchMapDataResult['latlong'] !== '') {
                    //we need to check if the value is the same
                    $("#searchResult").html(searchMapDataResult['lname']);
                    console.log(searchMapDataResult['lname']);
                    console.log(searchMapDataResult['latlong']);
                    var latlong = parseFloat(searchMapDataResult['latlong']);
                    var myLatLong = new google.maps.LatLng(7.289600,125.678066);
                    var iw = new google.maps.InfoWindow();
                    var myOptions = {
                        zoom: 15,
                        center: myLatLong,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    },
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                    var markerOptions = {
                        map: map,
                        position: myLatLong
                    };
                    marker = new google.maps.Marker(markerOptions);
                    //for (var i = 0, length = searchMapDataResult.length; i < length; i++) {
                    google.maps.event.addListener(marker, "click", function () {
                        iw.setContent(searchMapDataResult['lname']);
                        iw.open(map, marker);
                    });
                //}
                } else {
                    $("#searchResult").html('');
                    alertify.alert('Search result empty.').set('modal', false);
                    return;
                }
            }
        });
    });
});

和我的控制员:

class Maps extends CI_Controller() {
    public function __construct() {
    parent::__construct();
    $this->load->Model('Login_model');
    $this->load->Model('Maps_model');
}

public function mapSearchDataInMarker() {
    if (isset($_POST['searchDataToMarker'])) {
        $searchData = $_POST['searchDataToMarker'];
        $query = $this->db->query("SELECT * FROM resident WHERE name LIKE '%{$searchData}%' OR mname LIKE '%{$searchData}%' OR lname LIKE '%{$searchData}%' OR gender LIKE '%{$searchData}%' OR bday LIKE '%{$searchData}%' OR age LIKE '%{$searchData}%' OR citizenship LIKE '%{$searchData}%' OR occupation LIKE '%{$searchData}%' OR status LIKE '%{$searchData}%' OR purok LIKE '%{$searchData}%' OR resAddress LIKE '%{$searchData}%' OR perAddress LIKE '%{$searchData}%' OR email LIKE '%{$searchData}%' OR telNum LIKE '%{$searchData}%' OR cpNum LIKE '%{$searchData}%'");
        foreach ($query->result() as $searchResult) {
            echo json_encode($searchResult);
        }
    } else {
        echo '';
    }
}
}

这一切都完全有效。但我想用标记在指定位置显示这些数据(使用数据的纬度和经度)。

我的问题是,当我使用以下内容更改脚本中的var myLatLong = new google.maps.LatLng(7.289600, 125.678066);时:var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong']);其中该值来自数据的纬度和经度,它不会显示标记或地图。它显示带有控制器的灰色面板。我很困惑为什么它会显示这个var myLatLong = new google.maps.LatLng(7.289600,125.678066)的标记,但是var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong'])的{​​{1}}的值与searchMapDataResult['latlong']完全相同?

我知道这个问题很广泛,帖子太长了,但我希望你们都能帮助我。任何想法和建议都是天堂般的赞赏,提前谢谢:)

1 个答案:

答案 0 :(得分:1)

问题是google.maps.LatLng期待两个数字并且你从数据库传递一个字符串(假设searchMapDataResult ['latlong']返回一个逗号分隔的字符串)。所以你需要

  1. 拆分纬度和经度
  2. 将它们转换为数字
  3. 生成google.maps.LatLng
  4. 像这样:

    var latLngArray = searchMapDataResult['latlong'].split(',');
    var latitude = parseFloat(latLngArray[0]);
    var longitude = parseFloat(latLngArray[1]);
    var myLatLong = new google.maps.LatLng(latitude,longitude );