从Google数据库在Google地图上添加多个标记 [英] Adding multiple markers on Google Maps from MySQL database
本文介绍了从Google数据库在Google地图上添加多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在MySQL数据库中使用数据（lat和lng）在Google地图上显示多个标记。当我运行一个foreach循环来在地图上返回这些标记时，它只返回最后一行。可能是什么问题？
<？php
require_oncedb / db_handle.php;
$ select =SELECT * FROM map;
$ data = $ db-> query（$ select）;
？>
<！DOCTYPE html>
< html>
< head>
< style>
#map {
height：400px;
宽度：100％;
}
< / style>
< / head>
< body>
< h3>我的Google地图演示< / h3>
< div id =map>< / div>
<？php foreach（$ data as $ key）{
echo $ key ['lat'];
？>
< script>
函数initMap（）{
var uluru = {lat：<？php echo $ key ['lat']; ？>，lng：<？php echo $ key ['lng']; ？>};
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：12，
center：uluru
}）;
var marker = new google.maps.Marker（{
position：uluru，
map：map
}）;
var contentString ='<？php echo $ key ['address']; ？>;
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
var marker = new google.maps.Marker（{
位置：uluru，
map：地图，
标题：'Uluru（地址）'
}）;
marker.addListener（'click'，function（）{
infowindow.open（map，marker）;
}）;
}
< / script>
<？php}？>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap>
< / script>
< / body>
< / html>
解决方案
这将是非常容易获取所有拉特和long。
require_oncedb / db_handle.php;
$ select =SELECT * FROM map;
$ data = $ db-> query（$ select）;
foreach（$ data as $ key）
$ locations [] = array（'name'=>'Location Name'，'lat'=> $ key ['lat']，'lng '=> $ key ['lng']）;
}
/ *将数据转换为json * /
$ markers = json_encode（$ locations）;
然后使用php变量标记设置google地图标记。
< script type ='text / javascript'>
<？php
echovar markers = $ markers; \\\
;
？>
函数initMap（）{
var latlng = new google.maps.LatLng（-33.92，151.25）; //默认位置
var myOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControl：false
};
var map = new google.maps.Map（document.getElementById（'map'），myOptions）;
var infowindow = new google.maps.InfoWindow（），marker，lat，lng;
var json = JSON.parse（markers）;
（json中的var o）{
lat = json [o] .lat;
lng = json [o] .lng;
name = json [o] .name;
marker = new google.maps.Marker（{
position：new google.maps.LatLng（lat，lng），
name：name，
map：地图
}）;
google.maps.event.addListener（marker，'click'，function（e）{
infowindow.setContent（this.name）;
infowindow.open（map，this）;
} .bind（marker））;
$ / code $ / pre
$ b $ p整体代码将是：
require_oncedb / db_handle.php;
$ select =SELECT * FROM map;
$ data = $ db-> query（$ select）;
foreach（$ data as $ key）
$ locations [] = array（'name'=>'Location Name'，'lat'=> $ key ['lat']，'lng '=> $ key ['lng']）;
}
/ *将数据转换为json * /
$ markers = json_encode（$ locations）;
？>
<！DOCTYPE html>
< html>
< head>
< style>
#map {
height：400px;
宽度：100％;
}
< / style>
< / head>
< body>
< h3>我的Google地图演示< / h3>
< div id =map>< / div>
< script type ='text / javascript'>
<？php
echovar markers = $ markers; \\\
;
？>
函数initMap（）{
var latlng = new google.maps.LatLng（-33.92，151.25）; //默认位置
var myOptions = {
zoom：10，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControl：false
};
var map = new google.maps.Map（document.getElementById（'map'），myOptions）;
var infowindow = new google.maps.InfoWindow（），marker，lat，lng;
var json = JSON.parse（markers）;
（json中的var o）{
lat = json [o] .lat;
lng = json [o] .lng;
name = json [o] .name;
marker = new google.maps.Marker（{
position：new google.maps.LatLng（lat，lng），
name：name，
map：地图
}）;
google.maps.event.addListener（marker，'click'，function（e）{
infowindow.setContent（this.name）;
infowindow.open（map，this）;
} .bind（marker））;
}
}
< / script>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap>
< / script>
< / body>
< / html>
I am trying to display multiple markers on Google maps using data (lat and lng) from a MySQL database. When I run a foreach loop to return these markers on the map, it returns only the last row. What might be the problem?
<?php
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<?php foreach ($data as $key) {
echo $key['lat'];
?>
<script>
function initMap() {
var uluru = {lat: <?php echo $key['lat']; ?>, lng: <?php echo $key['lng']; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var contentString = '<?php echo $key['address']; ?>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Address)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<?php } ?>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>
解决方案 It will be very easy to fetch all the lat and long.
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
Then set the google map markers using the php variable markers.
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
Overall code will be :
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>
这篇关于从Google数据库在Google地图上添加多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
