在Biostall-google-maps-V3 API库问题中用latlong json数据显示标记 [英] Displaying marker with latlong json data in Biostall-google-maps-V3 API Library issue
问题描述
我有一个简单的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，
成功：function（searchMapDataResult）{
if（searchMapDataResult.length！== null | | $（'searchDataToMarker'）。value！==''|| searchMapDataResult ['latlong']！==''）{
//我们需要检查值是否相同
$ （#searchResult）。html（searchMapDataResult ['lname']）;
console.log（searchMapDataResu lt ['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;
}
}
}）;
}）;
}）;
和我的管理员：
类地图扩展CI_Controller（）{
public function __construct（）{$ b $ parent :: __ construct（）;
$ this-> load->模型（'Login_model'）;
$ this-> load->模型（'Maps_model'）;
$ b $ 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}％'或性别LIKE'％{$ searchData}％'或bday LIKE'％{$ searchData}％'或年龄LIKE'％{$ searchData}％'或公民身份LIKE'％{$ searchData}％' OR职业LIKE'％{$ searchData}％'或状态LIKE'％{$ searchData}％'或者purok LIKE'％{$ searchData}％'或resAddress LIKE'％{$ searchData}％'或perAddress LIKE'％{ $ searchData}％'OR email LIKE'％{$ searchData}％'或telNum LIKE'％{$ searchData}％'或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']返回一个以逗号分隔的字符串）。所以你需要
- 分割经纬度
- 将它们转换为数字 >
- 生成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）;
i have a simple AJAX that will get all data from MYSQL with my controller then display all data with its latitude and longitude when searched:
$(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;
}
}
});
});
});
and my controller:
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 '';
}
}
}
all of this totally works. But i want to display this data with marker in its designated location(using data's latitude and longitude).
My problem is, when i change the var myLatLong = new google.maps.LatLng(7.289600, 125.678066); in the script with this: var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong']); where that value is from the data's latitude and longitude, it doesn't show marker nor the map. It display a gray panel with its controllers. And i am confuse why does it display a marker with this var myLatLong = new google.maps.LatLng(7.289600,125.678066) but it doesn't display with this var myLatLong = new google.maps.LatLng(searchMapDataResult['latlong']) where the value of searchMapDataResult['latlong'] are totally the same?
I know that this question is broad and the post are too long but i hope you all help me with this. Any ideas and suggestions are heavenly appreciated, thanks in advance :)
The problem is google.maps.LatLng is expecting two numbers and you are passing it a string from your database (assuming searchMapDataResult['latlong'] is returning a comma delimited string). So you will need to
- Split the latitude and longitude
- Convert them into numbers
- Generate the google.maps.LatLng
Like this:
var latLngArray = searchMapDataResult['latlong'].split(',');
var latitude = parseFloat(latLngArray[0]);
var longitude = parseFloat(latLngArray[1]);
var myLatLong = new google.maps.LatLng(latitude,longitude );
这篇关于在Biostall-google-maps-V3 API库问题中用latlong json数据显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
