Question

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

    <?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>

Answer 1

只需复制点和标记，然后相应地增加即可。

var point = new google.maps.LatLng（'php echo（$ LATITUDE）;'，'php echo（$ LNG）;'）;

var point2 = new google.maps.LatLng（' echo（$ LATITUDE2）; '，' echo（$ LNG2）; “）;

var marker = new google.maps.Marker（{ draggable：是的， raiseOnDrag：false，图标：图像，影子：影子，形状：形状，地图：地图，位置：点 }）;

var marker2 = new google.maps.Marker（{ draggable：是的， raiseOnDrag：false，图标：图像，影子：影子，形状：形状，地图：地图，位置： point2 }）;

添加多个自定义标记/点

1 个答案: