javascript - 使用 PHP 数据在 Google 地图上放置多个标记
问题描述
我正在开发一个网页,该网页从 MySQL 数据库中获取信息,然后根据数据在地图上放置多个标记。虽然我的地图集成工作正常,但我使用 PHP 数据的代码阻止了地图的显示。但是,它没有显示任何错误。
这是代码。我是 JavaScript 新手,但我认为问题出在具有 PHPecho
语句的函数中。我真的很感激帮助。
PHP:
$lat = [];
$long = [];
$location = [];
$id = [];
$count = 0;
$count2 = 0;
$query = "SELECT * FROM table_name Order BY id DESC";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result)) {
array_push($id, $row['id']);
$count++;
}
for ($i = 0; $i < $count; $i++) {
$webId = $id[$i];
$webSearch = mysqli_query($con, "SELECT * FROM table_name WHERE id='$webId'");
$web = mysqli_fetch_array($webSearch);
array_push($lat, $row['lat']);
array_push($long, $row['longi']);
array_push($location, $row['city']);
}
JavaScript:
// Initialize and add the map
function initMap() {
var count = <?php echo $count;?>;
for (var i = 0; i < count; i++) {
var marker = new google.maps.Marker({
position: {
lat: <?php echo $lat[$count2];?>,
lng: <?php echo $long[$count2]; ?>
},
map: map,
title: <?php echo $lat[$count2]; $count2++;?>
});
}
}
解决方案
我无法理解这两个 sql 查询的目的 - 从一个表中选择所有内容,然后从同一个表中再次选择所有内容......据我所知,一个查询就足够了。
此外,在 javascript 中使用 PHP 并期望计数器$count2
不是初始值(如这里)或最后一个值(如果它被更改)将是一个谬论。正如$count2
最初给定的值0
一样,它保留该值,因为变量永远不会在任何地方更改,而是在 javascript 代码中用于访问来自 PHP 变量的数据,$lat
并且$long
- 这将始终产生相同的结果并因此呈现单个标记 - 或多个标记在同一个位置。
也许考虑如下方法,其中 php 代码运行并获取记录集并转换为 JSON 数据,以便地图代码仅使用 javascript 进行本机处理。
/*
Fetch the results and convert to JSON for the js code... or an empty array
if the query fails.
*/
$sql = 'select * from `table_name` order by `id` desc';
$result = $con->query( $sql );
$json = $result ? json_encode( $result->fetch_all( MYSQLI_ASSOC ) ) : json_encode( array() );
<script>
/*
As PHP runs before the page is rendered you can print
the javascript variable and it will be available to
your map handling code - `initMap`
*/
<?php
echo "var json={$json};";
?>
function initMap(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 25.363, lng: 131.044}
});
var obj,marker;
/*
The json data should be accessible like this - or
by a very similar syntax.
*/
for( var i in json ){
obj=json[ i ];
marker=new google.maps.Marker({
position: {
lat: obj.lat,
lng: obj.longi
},
map: map,
title: obj.city
});
}
}
</script>
推荐阅读
- c - 矩阵乘法不适用于 C 中大于外部的内部维度
- android - 如何增加 FD_SETSIZE 或限制 Android Emulator 引发的描述符数量
- node.js - Docker Nodejs - 将应用程序文件夹映射到主机文件夹 - 应用程序无法启动,找不到模块
- c# - 在 C# 中计算下一个可接受的通知时间
- reactjs - 前一个函数完成后调用一个函数reactjs
- python - 我可以在不使用try语句的情况下捕获python中的异常信息吗?
- coding-style - 我的解决方案有什么问题?帮我改进它或任何其他解决方案?
- tvos - TVOS:在 tvOS 应用程序上显示警报的问题
- java - 静态方法不能在非静态上下文中运行
- mongodb - 将 MongoDB compass 客户端连接到 kubernetes 集群内的 mongodb 数据库