谷歌在php中映射多个标记不起作用答案

【问题标题】：google maps multiple markers in php not working谷歌在php中映射多个标记不起作用
【发布时间】：2015-09-08 05:14:46
【问题描述】：

要在我的网站中放置地图，我将遵循一个示例，它将显示静态标记，例如。

var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];

我希望它从 mysql 表中获得动态。它有纬度和经度。我试过了，但没有用

<?php
    $host = "localhost";
    $db_name = "aarya";
    $user = "root";
    $password = "";

    $con = mysql_connect($host,$user,$password) or die("connection error");

    mysql_select_db($db_name) or die("could't connect to database");

    $query="SELECT * FROM detail";
    $result=mysql_query($query);
    while ($row=mysql_fetch_array($result)) {
    ?>
var locations = [
  ['<?php echo $row['name'];?>','<?php echo $row['lat'];?>','<?php echo $row['lng'];?>'],
<?php
}
?>
];

我认为位置数组有问题，我是谷歌地图的新手，请帮助我。

【问题讨论】：

你有没有研究过使用 php 的 json_encode 函数？

标签： php google-maps google-maps-api-3

【解决方案1】：

这是一个粗略的例子：

您的locations 数组：

<?php
$locations[0] = array("lat"=>"-33.890542", "long"=>"151.274856", "info" => "Bondi Beach");
$locations[1] = array("lat"=>"-33.923036", "long"=>"151.259052", "info" => "Coogee Beach");
$locations[2] = array("lat"=>"-34.028249", "long"=>"151.157507", "info" => "Cronulla Beach");
$locations[3] = array("lat"=>"-33.80010128657071", "long"=>"151.28747820854187", "info" => "Manly Beach");
$locations[4] = array("lat"=>"-33.950198", "long"=>"151.259302", "info" => "Maroubra Beach");
?>

或者你可以像这样查询数据库：

<?php
$query="SELECT * FROM detail";
$result=mysql_query($query);
while ($row=mysql_fetch_array($result)) {
    $locations[] = array("lat"=>$row['lat'], "long"=>$row['lng'], "info" => $row['name']);
}
?>

您可以使用数据库中的值修改上述数组。地图：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            body { font: normal 10pt Helvetica, Arial; }
            #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
        </style>
        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">

        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.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();

        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: 0,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions:
            {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            navigationControl: true,
            navigationControlOptions:
            {
                style: google.maps.NavigationControlStyle.SMALL
            }
            });
            <?php foreach($locations AS $loc) { //you could replace this with your while loop query ?>
                addMarker(<?php echo $loc["lat"]; ?>, <?php echo $loc["long"]; ?>, '<?php echo $loc["info"]; ?>');
            <?php } ?>
            center = bounds.getCenter();
            map.fitBounds(bounds);
        }
        </script>
    </head>
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
    <div id="map"></div>
</html>

希望有帮助:)

【讨论】：

我的数据库每次都在变化，所以我希望它是动态的。
@DivyeshJesadiya 只需查询您的数据库并将$locations 保持在循环中，分配键值lat、long 和info
我查询了我的数据库，但我不知道如何分配它。如果你给我一个例子。它会很好。
显示空白页。
@DivyeshJesadiya 检查浏览器的控制台，同时检查您在执行print_r($locations); 时得到的结果

【解决方案2】：

每次运行 while 循环时，您都在初始化 var 位置。在这方面你将只有最后一次迭代的值。请初始化外部位置并将值推送到 javascript 数组中。另外你应该考虑 json_encode 方式。它更干净。

【讨论】：

我不知道 json_encode way.from 哪里找到它？

【解决方案3】：

如果您是谷歌地图的新手，您可以使用 gmaps.js，它可以让您以简单的方式利用谷歌地图的潜力。

https://hpneo.github.io/gmaps/

及其标记示例： https://hpneo.github.io/gmaps/examples/markers.html

我认为你需要使用对象：

var locations = {
    {
        title: '<?= $row['name'] ?>',
        lat: '<?= $row['lat'] ?>',
        lng: '<?= $row['lng'] ?>'
    }
}

你可以使用 json_encode 代替

【讨论】：

【解决方案4】：

在您的代码中，您已经在全球范围内提供了以下位置：

var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];

现在在您的文件中添加以下HTML 和Javascript 并刷新页面。这将向您显示谷歌地图。

HTML：

<div id="map_canvas" style="width:700px;height:500px;"></div>;

Javascript

function loadMap()
{
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  for( i = 0; i < locations.length; i++ ) {
    var loc = locations[i];
    var position = new google.maps.LatLng(loc[1], loc[2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: loc[0]
    });
    map.fitBounds(bounds);
  }
}
google.maps.event.addDomListener(window, 'load', loadMap);

【讨论】：

这是我遵循的示例。我的代码是第二个。
对您有帮助吗？请注意分享您的最终结果，因为这可能对其他人有所帮助。

【解决方案5】：

如果您想动态使用您的数据库，请查看此示例。

创建文件 map3.php。文件和这里一样

$conn = mysql_connect("localhost","root","");

mysql_select_db('yourdatabase');

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}

$query = mysql_query("select * from yourtable");



//header("Content-type: text/html");

/* Get lat and Lan using table query */
$i=0;

while($row = mysql_fetch_assoc($query)){


$reposnse['markers'][$i]['lat']= $row['lat'];
$reposnse['markers'][$i]['lag']= $row['lag'];


$i++;
}

echo json_encode($reposnse);
?>

After create map2.php same as here

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="application/javascript">





     $(document).ready(function(e) {



$.ajax({
url:"map3.php",
dataType: 'json',
success: function(result){
var html = '<markers>';


for (var prop in result['markers']) {

var value = result['markers'][prop];
//alert(value.lat);
html += '<marker ';
html += 'lat="';
html += value.lat+'"';
html += 'lng="';
html += value.lag+'"';
html += '/>';
}
html += '</markers>';
$('#test').html(html);

function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: new google.maps.LatLng(15.317277,75.71389),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

var infowindow = new google.maps.InfoWindow();

        var marker;

        var location = {};


var markers = document.getElementsByTagName("marker");


        for (var i = 0; i < markers.length; i++) {

//alert(markers[i].getAttribute("lat"));
            location = {
                name : 'test'+i,
                address : 'baglore',
                city : 'bangalore',
                state : 'Karnataka',
                zip : '560017',
                pointlat : parseFloat(markers[i].getAttribute("lat")),
                pointlng : parseFloat(markers[i].getAttribute("lng"))  
            };

            console.log(location);

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(location.pointlat, location.pointlng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker,location) {
                return function() {
                    infowindow.setContent(location.name);
                    infowindow.open(map, marker);
                };
            })(marker, location));
        }
  }

    google.maps.event.addDomListener(window, 'load', initialize);

},
});

    });

    </script>
</head>
<body>
    <div id="test">
    </div>

    <div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>

请查看下方链接Adding multiple markers to google maps using javascript and php

【讨论】：