php - 添加多个自定义标记/点

我有以下代码，它工作正常，但我不知道如何添加更多标记/点。有人可以帮助我吗，提前致谢!

    <?php
    // Get the JSON - THIS CODE WILL CONVERT CITY,STATE INTO LAT/LNG.
    $url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
    $source = file_get_contents($url);
    $obj = json_decode($source);
    $LATITUDE = $obj->results[0]->geometry->location->lat;
    $LNG = $obj->results[0]->geometry->location->lng;
    echo ('LAT: ').$LATITUDE;
    echo ('<BR>LNG: ').$LNG;
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    function load(){

var point = new google.maps.LatLng(<?php echo ($LATITUDE); ?>, <?php echo ($LNG); ?>);

      var myMapOptions = {
        zoom: 4,
        center: point,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };

      var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

      var image = new google.maps.MarkerImage(
        'marker-images/image.png',
        new google.maps.Size(40,35),
        new google.maps.Point(0,0),
        new google.maps.Point(20,35)
      );

      var shadow = new google.maps.MarkerImage(
        'marker-images/shadow.png',
        new google.maps.Size(62,35),
        new google.maps.Point(0,0),
        new google.maps.Point(20,35)
      );

      var shape = {
        coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
        type: 'poly'
      };

      var marker = new google.maps.Marker({
        draggable: true,
        raiseOnDrag: false,
        icon: image,
        shadow: shadow,
        shape: shape,
        map: map,
        position: point
      });

    }

    </script>
    </head>
    <body onload="load()">
    <div id="map" style="width:900px;height:500px;margin:40px auto;"></div>

    </body>
    </html>

更新:这是我也尝试过的(在hansvedo的帮助下):

<?php
// Get the JSON 
$url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
$source = file_get_contents($url);
$obj = json_decode($source);
$LATITUDE = $obj->results[0]->geometry->location->lat;
$LNG = $obj->results[0]->geometry->location->lng;

$url2='http://maps.googleapis.com/maps/api/geocode/json?address=Akron+OH&sensor=false';
$source2 = file_get_contents($url2);
$obj2 = json_decode($source2);
$LATITUDE2 = $obj2->results[0]->geometry->location->lat;
$LNG2 = $obj2->results[0]->geometry->location->lng;

echo ('LAT: ').$LATITUDE;
echo ('<BR>LNG: ').$LNG;
echo ('<BR><BR>');
echo ('LAT: ').$LATITUDE2;
echo ('<BR>LNG: ').$LNG2;
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function load(){

var point = new google.maps.LatLng('LATITUDE', 'LNG');
var point2 = new google.maps.LatLng('LATITUDE2', 'LNG2');

  var myMapOptions = {
    zoom: 5,
    center: point,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

  var image = new google.maps.MarkerImage(
    'marker-images/image.png',
    new google.maps.Size(40,35),
    new google.maps.Point(0,0),
    new google.maps.Point(20,35)
  );

  var shadow = new google.maps.MarkerImage(
    'marker-images/shadow.png',
    new google.maps.Size(62,35),
    new google.maps.Point(0,0),
    new google.maps.Point(20,35)
  );

  var shape = {
    coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
    type: 'poly'
  };

//  var marker = new google.maps.Marker({
//    draggable: true,
//    raiseOnDrag: false,
//    icon: image,
//    shadow: shadow,
//    shape: shape,
//    map: map,
//    position: point
//  });

var marker = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point });
var marker2 = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point2 });


}

</script>
</head>
<body onload="load()">
<div id="map" style="width:900px;height:500px;margin:40px auto;"></div>

</body>
</html>

最佳答案

只需复制点和标记，并相应地递增即可。

var point = new google.maps.LatLng('php echo($LATITUDE);', 'php echo($LNG);');

var point2 = new google.maps.LatLng('echo($LATITUDE2);', 'echo($LNG2); ');

var 标记 = 新 google.maps.Marker({ 可拖动:真实， raiseOnDrag:假，图标:图像，影子:影子，形状: 形状， map : map ，位置:点 });

var marker2 = new google.maps.Marker({ 可拖动:真实， raiseOnDrag:假，图标:图像，影子:影子，形状: 形状， map : map ，位置:点2 });

关于php - 添加多个自定义标记/点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13770740/

php - 添加多个自定义标记/点

上一篇：javascript - 创建没有缓动效果的垂直轮播

下一篇：javascript - 在 html5 canvas 上渲染需要消耗太多时间，缓冲几乎没有帮助