- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在显示从 MySQL 数据库中提取数据的标记时遇到问题。尽管 JSON 有效,但 JSON 格式不正确。我想至少有两种方法可以解决我的问题,1. 更改 MySQL 查询或 2. 在使用 Gmap3 构建 Google Map 之前使用 jQuery 操作 JSON 输出。我与他们中的任何一个都斗争..
my-json.php 中的 MySQL 查询和 JSON 编码:
try {
$db = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$tatorte = $db->query("
SELECT p.post_title as title,
max(case when pm.meta_key = '_cmb_tatort_map_latitude' then pm.meta_value end) as lat,
max(case when pm.meta_key = '_cmb_tatort_map_longitude' then pm.meta_value end) as lng,
max(case when pm.meta_key = '_cmb_subline' then pm.meta_value end) as subline,
max(case when pm.meta_key = '_cmb_teaser_text' then pm.meta_value end) as teaser
FROM mob_posts p join
mob_postmeta pm
on pm.post_id = p.ID
WHERE pm.meta_key in ('_cmb_tatort_map_latitude', '_cmb_tatort_map_longitude', '_cmb_subline', '_cmb_teaser_text') and
p.post_type = 'tatort'
group by p.id
ORDER BY p.id DESC
LIMIT 100;
");
$rows = array();
while ($locations = $tatorte->fetch_assoc()) {
$rows[] = array('values' => $locations);
}
$json = array(
"center" => array(51.95026490,11.69227350), // center map at a given location
"tatorte" => $rows
);
header('Content-Type: application/json; charset=UTF-8;');
echo json_encode( $json );
} catch (Exception $e) {
echo $e->getMessage();
}
所以这似乎工作正常,我得到了一个像这样的有效 JSON:
{
"center":[
51.9502649,
11.6922735
],
"tatorte":[
{
"values":{
"title":"my title",
"lat":"51.7920562",
"lng":"11.141447999999968",
"subline":"my sublime",
"teaser":"my teaser text"
}
}
]
}
显然,格式应该是这样的:
{
"center": [
46.578498,
2.457275
],
"tatorte": [
{
"lat": 49.00408,
"lng": 2.56228,
"data": {
"title":"my title",
"subline":"my sublime",
"teaser":"my teaser text"
}
}
]
}
所以我尝试在 jQuery 中加载和操作我的 JSON:
function loadData(){
var markers = [];
$.ajax({
url:'my-json-load.php',
success:function(data){
var markers = [];
$.each(data, function(key, val){
var position = [val.lat, val.lng];
markers.push({ latLng: position });
});
display(data.center, data.tatorte);
}
});
}
然后,使用 Gmap3 插件显示它们:
$(function(){
loadData();
});
function display(center, tatorte) {
$('#map_canvas').gmap3({
map:{
options:{
center: center,
zoom:7,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
marker: {
values: tatorte
}
});
}
中心点显示正确,与 map 本身相同。只有标记丢失了。而且我错过了一些正确的事情......我想这很容易,但我对 jQuery/javascript 或如何更改 MySQL 查询以获得标记值的正确格式没有太多经验.任何人?非常感谢帮助。谢谢。
最佳答案
尝试调整您的 php。
while ($locations = $tatorte->fetch_assoc()) {
$lat = $locations['lat'];
$lng = $locations['lng'];
$values = json_encode( array('title' => $locations['title'], 'subline' => $locations['subline'], 'teaser' => $locations['teaser']) );
$rows[] = array('lat' => $lat, 'lng' => $lng, 'values' => $values);
}
关于jquery - 使用 MySQL、JSON 和 jQuery 插件 Gmap3 填充谷歌地图标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20425415/
我在使用 JSF2.0 的 Primefaces 3.5 的 Gmap 组件的项目上遇到问题。我有这个命令按钮,可以对标记进行过滤和最重要的更新 mapForm map 形式:
我使用的是 Gmap.NET 的 WinForm 版本。我正在做的是为每个标记创建 1 个叠加层,然后将其添加到我的 map 控件中。这显着减少了我程序中的延迟。现在唯一的问题是,如果我想隐藏一个覆盖
我正在尝试创建一个应用程序位置,但它向我显示错误 gmaps (com.formation.gmaps) 的应用程序已意外停止。 请注意,我已经卸载了eclipse,但总是出现此错误。 这是我的错误日
我在使用 angular-google-maps 时遇到问题。我只想将基本的信息窗口附加到 map 上的每个标记。我正在使用 ui-gmap-markers 并在每个标记指令内放置一个 ui-gmap
自定义Marker,可以理解为在地图上自定义图标(Custom Marker),先看看GMap的地图和图标的显示方式: Map控件上可以添加Overlay(图层),可以添加多个图层,先添加的图
我正在尝试制作一个能够显示 map 的小应用程序。我遇到了 GMap.Net,它非常适合我的目的,除了 map 没有完全显示在控件中。我附上了一张图片,希望你能理解我的问题。 我的加载按钮代码是 pr
我想使用 GMap.Net 的路线方法绘制路线。但是,当我用新颜色将任何点添加到路线列表中时,所有路线的颜色都发生了变化。因此,一条路线似乎只能使用一种颜色。有没有办法在一条 route 使用两种或多
我打算使用GMap.Net设计Windows窗体应用程序,以查看供个人使用的离线地图。我已经有一些mapdata,可以使用通用映射downloader下载,可以将其转换为sqlite db格式。但是G
我在我的 Windows 应用程序 (C#) GMAP API 中使用,我需要显示 map 的地形特征,因此,我尝试按如下方式分配 map 的提供者: Map.MapProvider = GMapP
我需要处理 map 上的每个标记,所以我想要的是这样的: var marker[5] = new google.maps.Marker({ position: new google.maps.La
我正在尝试实现此功能( GMap - Info Window)在我的网站上。 标记有效,但信息窗口从未显示。我尝试在 applicationContext.xml 中为 InfoWindowView.
我可以在悬停时更改标记大小吗?我需要在悬停时增加标记大小 (2-3 px) 并在鼠标移开时减小到默认大小。 最佳答案 如果您使用自定义图标,您可以轻松地在鼠标悬停时更改图像: [...] var ma
IsMouseOverMarker 属性检测点击标记就好了,但是当尝试使用 GMap 控件的 IsMouseOverPolygon 属性检测用户是否点击多边形时行 - 它似乎不起作用。 注意:GMap
我正在使用 gmap.net 控件在 Windows 窗体上显示 map 。到目前为止,除了 map 拖动功能外,一切正常。一般来说,左鼠标按钮支持 map 拖动,但在 gmap.net 控件中鼠标右
我正在尝试从该位置输出路线时间,由于某种原因该路线从未经过。 jQuery(document).ready(function () { $.get('api/index.php', funct
我有一个关于 jQuery Google map 代码的简单问题。 我已向 map 添加了标记,但信息窗口在开始时不会显示,仅在鼠标悬停后才显示。 这是代码: (function ($) { var
我正在尝试创建一个位置输入字段,用户将在其中选择一个位置。因此 map 上应该只存在一个标记。 我当前的代码在点击时添加了一个标记: var map = new GMaps({
我正在使用 gmaps.js,我可以使用此代码绘制多边形 var paths = []; function drawPoly(p1, p2) { paths.push([p1, p2]); c
当我拖动标记时,是否可以禁用 google mal (v3) 内部的移动?我不想使用静态 map 。我需要一般的移动功能,但是当我拖动标记时, map 不应该移动。 非常感谢! 最佳答案 标记有 dr
我们在创建多边形时遇到问题,因为它们没有出现在 map 上。我们按照本教程来实现我们的解决方案: http://googlemaps.subgurim.net/ejemplos/ejemplo_941
我是一名优秀的程序员,十分优秀!