DataLayer/GeoJson自定義Google莊家

Question

我目前有一個問題獲取谷歌標記顯示自定義圖像取決於類型。過去的工作只有一個圖像適用於所有的標記。

map.php

var map, 
    infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-25)}); 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 12, 
     center: {lat: 53.927895, lng: -1.386487} 
    }); 

    map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php'); 

    map.data.addListener('click', function(event) { 
     infoWindow.setContent(
      'Surname: ' + event.feature.getProperty('surname') + '<br>' + 
      'Postcode: ' + event.feature.getProperty('postcode') 
     ); 
     var anchor = new google.maps.MVCObject(); 
     anchor.set("position",event.latLng); 
     infoWindow.open(map,anchor); 


    }); 

    var iconBase = 'http://customers.auroracomputers.co.uk/icons/' 
    var icons = { 
     business: { 
     icon: iconBase + 'business.png' 
     }, 
     home: { 
     icon: iconBase + 'home.png' 
     }, 
     competitor: { 
     icon: iconBase + 'devil.png' 
     } 
    }; 

    function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
    position: feature.position, 
    icon: icons[feature.type].icon, 
    map: map 
    }); 
    } 




    map.data.setStyle({ 
    icon: 'http://customers.auroracomputers.co.uk/icons/home.png', 
    icon: icons[feature.type].icon, 
    icon: icon.competitor.icon 
    }); 






} 

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

客戶爲Json.php

for ($i=0;$i<$nrows;$i++){ 

$row = mysqli_fetch_assoc($result); 

?> 
<script> 
    { 
    "type": "Feature", 
    "geometry": { 
    "type": "Point", 
     "coordinates": [<?echo $row['lng'];?>,<?echo $row['lat'];?>] 
    }, 
    "properties": { 
    "surname": "<?echo $row['surname'];?>", 
    "postcode": "<?echo $row['postcode'];?>", 
    "type": "<?echo $row['type'];?>" 
    } 
    }<?php if($i != $nrows-1){ ?>,<?php } ?> 
    </script> 

Answer 1

GeoJSON的標記比自帶谷歌地圖JavaScript API V3標誌風格不同。請參閱Style GeoJSON Data in the documentation，特別是關於Change Appearance Dynamically的部分。

map.data.setStyle(function(feature) { 
    var type = feature.getProperty('type') 
    return /** @type {google.maps.Data.StyleOptions} */ ({ 
    icon: icons[type].icon, 
    title: type 
    }); 
}); 

from the reference：

圖標類型：string |圖標|符號

圖標的前景。如果提供了一個字符串，則將它視爲一個帶有字符串作爲url的圖標。僅適用於點幾何。

proof of concept fiddle

代碼片段：

var map, 
 
    infoWindow = new google.maps.InfoWindow({ 
 
    pixelOffset: new google.maps.Size(0, -25) 
 
    }); 
 

 
function initialize() { 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 40.7127837, 
 
     lng: -74.0059413 
 
    } 
 
    }); 
 

 
    // map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php'); 
 
    map.data.addGeoJson(testGeoJson) 
 

 
    map.data.addListener('click', function(event) { 
 
    infoWindow.setContent(
 
     'Surname: ' + event.feature.getProperty('surname') + '<br>' + 
 
     'Postcode: ' + event.feature.getProperty('postcode') 
 
    ); 
 
    var anchor = new google.maps.MVCObject(); 
 
    anchor.set("position", event.latLng); 
 
    infoWindow.open(map, anchor); 
 
    }); 
 

 
    var iconBase = 'http://customers.auroracomputers.co.uk/icons/' 
 
    var icons = { 
 
    business: { 
 
     icon: iconBase + 'business.png' 
 
    }, 
 
    home: { 
 
     icon: iconBase + 'home.png' 
 
    }, 
 
    competitor: { 
 
     icon: iconBase + 'devil.png' 
 
    } 
 
    }; 
 

 
    map.data.setStyle(function(feature) { 
 
    var type = feature.getProperty('type') 
 
    return /** @type {google.maps.Data.StyleOptions} */ ({ 
 
     icon: icons[type].icon, 
 
     title: type 
 
    }); 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
// New York, NY, USA (40.7127837, -74.00594130000002) 
 
// Newark, NJ, USA (40.735657, -74.1723667) 
 
var testGeoJson = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-74.0059413, 40.7127837] 
 
    }, 
 
    "properties": { 
 
     "surname": "York", 
 
     "postcode": " 10007", 
 
     "type": "home" 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-74.1723667, 40.735657] 
 
    }, 
 
    "properties": { 
 
     "surname": "Newark", 
 
     "postcode": "07102", 
 
     "type": "business" 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Answer 2

有一兩件事我注意到在源JSON被破壞，希望下面可能有助於獲取排序。

<?php 
    /* 
     Customer-Json.php 
     ----------------- 
     The original code had thousands of `<script>` & `</script>` tags 
     which meant it was not valid json. 

     I have assumed that the previous loop can be replaced with the 
     more usual recordset iteration loop as shown below. 

     Each row has items added to the json array which gets echoed at the 
     end - there is not need for the script tags at all - just include the 
     correct headers. 
    */ 

    /* store data to be sent */ 
    $json=array(); 

    /* using object notation for ease */ 
    while($row=mysqli_fetch_object($result)){ 

     $surname=$row->surname; 
     $postcode=$row->postcode; 
     $lat=$row->lat; 
     $lng=$row->lng; 
     $type=$row->type; 



     $json[]=array(
      'type'  => 'Feature', 
      'geometry' => array(
       'type'   => 'Point', 
       'coordinates' => array($lng, $lat) 
      ), 
      'properties' => array(
       'surname' => $surname, 
       'postcode' => $postcode, 
       'type'  => $type 
      ) 
     ); 
    } 

    $json=json_encode($json); 
    header('Content-Type: application/json'); 
    echo $json; 
?>