PlaceFeature.displayName被弃用后,如何使用数据驱动样式创建边界面?- JavaScript Google Maps API

oxalkeyp  于 2023-02-21  发布在  Java
关注(0)|答案(1)|浏览(104)

我有一个使用Google Maps API创建Map的网站,每次会随机突出显示一个国家,我目前突出显示国家的方法是使用data-driven styling创建boundary polygons
Example of how the map should look
但是,Google最近开始抛出错误,称**displayName**属性(我使用的)自2023年2月起不能再使用。以下是更改前代码的一个片段:

featureLayer.style = (options) => {
  if (options.feature["displayName"] == "Italy") {
    return featureStyleOptions;
  }
};

在官方的解释中,**fetchPlace()**函数应该只是用作替换because the fetchPlace() function also returns the displayName
但是fetchPlace()不能用在同步函数中(它只返回promise),所以我尝试重写代码,在这次尝试中我使用了.then()方法,但是现在它根本不应用边界多边形:

featureLayer.style = (options) => {
  options.feature.fetchPlace().then((Place) => {
    if (Place["displayName"] == "Italy") {
      return featureStyleOptions;
    }
  });
};

我对promises/.then()如何在JavaScript中工作以及它们如何处理值的知识有限,因此我可能完全错误地使用了这种方法。
理想情况下,我只会使用**PlaceId**作为DisplayName的替代品,但我没有任何方法获得ID。我将感谢您对此问题的任何帮助。谢谢!

t3psigkw

t3psigkw1#

displayName已过时,但placeId尚未过时。
下面是一个突出显示意大利的示例。要获得地点ID,可以使用Place ID finder。我添加了一个对Geocoder的调用,以便能够使Map适合要素。

let map;
let featureLayer;

function initMap() {

  let geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 13,
    mapId: "8ec1ff859561face", // You need to create your own map ID
  });

  featureLayer = map.getFeatureLayer("COUNTRY");

  // Define the styling options
  const featureStyleOptions = {
    strokeColor: "#00FF00",
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#519400',
    fillOpacity: 1,
  };

  // Below Place ID is "Italy"
  let placeId = 'ChIJA9KNRIL-1BIRb15jJFz1LOI';

  geocoder.geocode({
      placeId: placeId
    })
    .then(({
      results
    }) => {
      map.fitBounds(results[0].geometry.viewport);
    })
    .catch((e) => {
      console.log('Geocoder failed due to: ' + e)
    });

  // Apply the style to a single boundary.
  featureLayer.style = (options) => {
    if (options.feature.placeId == placeId) {
      return featureStyleOptions;
    }
  };
}
#map {
  height: 180px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>

关于fetchPlace(),文档规定:
不要从FeatureStyleFunction调用它,因为只支持同步FeatureStyleFunctions

相关问题