添加多個自定義標記/點

我有以下代碼，它工作正常，但我不知道如何添加更多標記/點。有人可以幫助我，感謝提前！添加多個自定義標記/點

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

來源

2012-12-07 compcobalt

我認爲這只是創造新的物體，像我創建了一個用戶標記這個'新google.maps.Marker' –

@BenjaminPaap但我怎麼同一個地圖上添加多個標記/分？ – compcobalt

正如我寫的，你必須創建該對象的新實例。如果你不知道如何，請考慮閱讀關於JavaScript。 –

只是複製點和標記，並相應地增加將做到這一點。（'PHP LATITUDE';'，'php echo（$ LNG）;'）;

變種POINT2 =新google.maps.LatLng（ '回波（$ LATITUDE2）;'， '回波（$ LNG2）;'）;

變種標記=新google.maps.Marker（{ 拖動：真， raiseOnDrag：假，圖標：圖像，陰影：陰影，形狀：形狀，圖：圖，位置：點 }）;

變種MARKER2 =新google.maps.Marker（{ 拖動：真， raiseOnDrag：假，圖標：圖像，陰影：陰影，形狀：形狀，圖：圖，位置： point2 }）;

來源

2012-12-07 22:08:44 hansvedo

我試過了，但它不起作用，我更新了我的問題，以便您可以看到我嘗試過的方法。你能看到我做錯了嗎？非常感謝！ – compcobalt

是的，這是在正確的軌道上。你需要使用PHP來回應你的PHP變量。 – hansvedo

我剛添加的回聲，這樣我可以確保該PHP是返回既爲LNG，LNG2，緯度和LATITUDE2 – compcobalt

添加多個自定義標記/點

回答

相關問題