Пользовательские Google Makers с DataLayer / GeoJson

Question

Пользовательские Google Makers с DataLayer / GeoJson

В настоящее время у меня проблема с получением маркеров Google для отображения пользовательских изображений в зависимости от типа. У меня это работало в прошлом, когда было только одно изображение для всех маркеров.

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>

1

google-maps jquery markers php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Маркеры GeoJson оформлены не так, как собственные маркеры Google Maps Javascript API v3. Увидеть Стиль GeoJSON Данные в документации, в частности, раздел о Изменить внешний вид динамически.

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

из ссылки:

icon Тип: строка | Значок | Символ

Значок для переднего плана. Если указана строка, она обрабатывается так, как если бы она была значком со строкой как URL. Относится только к точечной геометрии.

доказательство концепции скрипки

фрагмент кода:

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>

0

Другие решения

Одна вещь, на которую я обращаю внимание, это то, что источник 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;
?>

0

Источник