谷歌地图api,标记和php/mysql
google maps api, markers and php/mysql
我有以下一段代码;
<script type="text/javascript">
var icon = new google.maps.MarkerImage("img/pin_yellow.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
var style= [{"stylers":[{"visibility":"on"},{"saturation":-100},{"gamma":0.54}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#4d4946"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"gamma":0.48}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"gamma":7.18}]}];
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(0, 0),
zoom: 9,
maxZoom: 16,
minZoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true, // enable scale control
panControl: false,
mapTypeControl: false,
streetViewControl: false,
style: google.maps.ZoomControlStyle.SMALL, //zoom control size
styles: style,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$sql = "SELECT * FROM tbBaptism, tbLocation, tbChurch WHERE tbBaptism.idLocation=tbLocation.idLocation AND tbBaptism.idChurch=tbChurch.idChurch";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc())
{
$location = $row['location'];
$lat = $row['clat'];
$lng = $row['clng'];
$fname = $row['baptismForename'];
$sname = $row['baptismSurname'];
$dp_date = $row['baptismDate'];
$date = new DateTime($dp_date);
$churchName = $row['churchName'];
$combine = $fname . " " . $sname . ",<br>Baptised @ " . $churchName . "<br>" . $date->format('l jS F, Y');
echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');'n");
}
} else {
echo "No results to display or an error has occured";
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
大部分PHP部分可以忽略,但是这段代码从Mysql数据库中提取一些坐标和行;
echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');'n");
调用"addMarker"函数,为其提供lat、lng和一个文本字符串。
所有这些代码都可以很好地创建标记…我遇到的问题是由于数据的性质,我创建的许多标记都有纬度& &;经度是相同的,因为它们是从数据库中提取的教堂位置(用于标记多个坟墓的位置),所以标记看起来一个叠在另一个上面(所以四个或五个标记看起来像一个具有相同的lat/lng)。
我想做的是用完全相同的lng/lat聚集或错开标记,这样它们都是可见/可点击的…谁能帮助我修复我的代码做到这一点,或者我是一个失败的原因?(javascript不是我的强项!)
尝试使用这个库https://github.com/jawj/OverlappingMarkerSpiderfier
Google maps API V3 -多个标记在完全相同的位置
相关文章:
- 将phonegap图像发布到php/mysql-图像字段从发布请求中消失
- 如何使用jQueryPOST将get变量从JavaScript传递到PHP-Mysql
- 如何使用PHP+MySQL Ajax自动完成jQuery并传递给JavaScript
- 为什么PHP MySQL INSERT通过AJAX调用只是偶尔发生
- 将动态feild数据存储到jquery-mobile和php-mysql中的数据库中
- PHP MySQL 在一个页面和一个查询中插入具有多行的数据
- 多行 PHP MySQL 插入
- 我怎样才能为一个简短的项目托管 HTML/PHP/MySQL
- 如何处理json编码的php-mysql数组
- 根据php/mysql变量中的文本行调整文本区域的大小
- 我们可以用grunt设置一个php/mysql环境吗
- php/mysql搜索结果-当类型>1,同时保持其他类型不>1-代码点火器
- PHP/MySQL:将用户输入保存到数据库
- 使用PHP/MYSQL在phonegap中注册;不起作用
- PHP MySQL值传递到JavaScript
- 使用Javascript将变量传递到php-MySQL脚本
- 如何检查PHP/MYSQL中是否已经存在USERNAME
- 呈现Highcharts的问题-通过PHP/MySQL填充
- 如何在不输出结束PHP标签“?>”的情况下将PHP MySQL查询回显到Javascript变量中
- 通过使用onblur启动Ajax查询到PHP MySQL DB