在 Biostall-google-maps-V3 API 库问题中显示带有 latlong json 数据的标记

Question

我有一个简单的 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']) 显示，而searchMapDataResult['latlong'] 的值完全一样？

Answer 1

问题是 google.maps.LatLng 需要两个数字，而您从数据库中传递了一个字符串（假设 searchMapDataResult['latlong'] 返回一个逗号分隔的字符串）。所以你需要

1. 分割经纬度
2. 将它们转换为数字
3. 生成 google.maps.LatLng

像这样：

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