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标记的样式与本机Google Maps 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：

icon类型：字符串|图标|符号

前景图标。如果提供了一个字符串，则将其视为一个带有字符串为url的Icon。仅适用于点几何。

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

使用DataLayer / GeoJson自定义Google制作者

2 个答案: