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

Displaying marker with latlong json data in Biostall-google-maps-V3 API Library issue

本文关键字:数据 json 问题 latlong API Biostall-google-maps-V3 显示      更新时间:2023-09-26

我有一个简单的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']的值是完全相同的?

问题是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 );