在谷歌地图上绘制标记从php数组开始

时间:2021-06-04 13:39:06

All right, I'll try to explain my problem as clearly as I can. I already tried a lot of possible solution but never happen to find the right one. I also want to say this is a tutorial for me, i am just a beginner in combining JS, PHP and GMAPv3 APIs. I hope that someone can help me in solving this. That being said, here is my code with a few lines to explain what i want to do.

好吧,我会尽可能清楚地解释我的问题。我已经尝试了很多可能的解决方案,但从来没有碰巧找到合适的解决方案。我还想说这是一个教程,我只是一个结合JS,PHP和GMAPv3 API的初学者。我希望有人可以帮助我解决这个问题。话虽这么说,这是我的代码,用几行来解释我想做什么。

The problem involves 3 main files.

该问题涉及3个主要文件。

1) process.php (this file generates an array of coordinates)

1)process.php(此文件生成一个坐标数组)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>MyTest</title>
    <link rel="stylesheet" type="text/css" href="css/content.css" />
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
</head>
<body>
    <?php
    ...after some lines of code i build this...
    $myarray = ...;
    ...and here i move to the second file
    echo "<input type=\"button\" value=\"Next!\" onClick=\"location.href='map.html'\">";
    ?>
</body>

2) map.html (this file is responsible for drawing the map on the screen)

2)map.html(此文件负责在屏幕上绘制地图)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>MyTest</title>
    <link rel=stylesheet type="text/css" href="css/googlemap.css" />
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbNM4y2fJ4AdCoXcWW-sGXPl5nXaJogPA&sensor=false">
    </script>
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body onLoad="init_map_and_markers()">
    <div id="map_canvas">
    </div>       
</body>

2) gmapinit.js (the javascript file that builds the map and "should" get the array as parameter to draw markers accordingly)

2)gmapinit.js(构建地图的javascript文件,“应该”将数组作为参数来相应地绘制标记)

function init_map_and_markers() {
var global_markers = [];

var infowindow = new google.maps.InfoWindow({});
var latlng = new google.maps.LatLng(27.059126, -41.044922);
var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

//Of course here myarray is not defined but the point is making it available here so i can loop through it and place my markers!

for (var i = 0; i < markers.length; i++) {
    for(var count = myarray.length - 1; count >= 0; --count) { 
        var o = myarray[count];
        var lat = parseFloat(o.lat);
        var lng = parseFloat(o.lng);
        var markerdata = o.user;

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + markerdata + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Marker Data: " + markerdata
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }    
}

}

}

So the main question is, how can i pass $myarray from process.php to map.html making it available to gmapinit.js???

所以主要的问题是,如何将$ myarray从process.php传递给map.html使其可用于gmapinit.js ???

I am asking this avoiding to write down all code-tests i did because maybe my all thinking is wrong...that's why i am writing down the most "clean" code i got.

我要求这样做避免写下我所做的所有代码测试,因为也许我的想法都是错的......这就是为什么我写下了我得到的最“干净”的代码。

Code possible solutions would be much appreciated, and don't hesitate to ask for details if i missed something.

代码可能的解决方案将非常感激,如果我错过了什么,请毫不犹豫地询问细节。

Thanks a lot.

非常感谢。

1 个解决方案

#1


3  

you may use the markers as argument for init_map_and_markers()

你可以使用标记作为init_map_and_markers()的参数

<body onLoad="init_map_and_markers(<?php echo json_encode($phpArrayMarkersDefinition); ?>)">

..then you may access this array inside the function:

..然后你可以在函数内访问这个数组:

function init_map_and_markers(markers) 
{
  //....
  for(var i=0;i<markers.length;++i)
  {
    //create the markers here
  }

  //....
}

#1


3  

you may use the markers as argument for init_map_and_markers()

你可以使用标记作为init_map_and_markers()的参数

<body onLoad="init_map_and_markers(<?php echo json_encode($phpArrayMarkersDefinition); ?>)">

..then you may access this array inside the function:

..然后你可以在函数内访问这个数组:

function init_map_and_markers(markers) 
{
  //....
  for(var i=0;i<markers.length;++i)
  {
    //create the markers here
  }

  //....
}