谷歌地图:特定建筑物风格

huangapple go评论66阅读模式
英文:

Google map : Specific building styling

问题

我正在使用谷歌地图,使用谷歌地图平台的样式创建器隐藏默认地点图标,并将建筑物显示为平面。它运行良好。现在我正在尝试更改特定建筑物的样式(例如更改我当前所在建筑物的颜色)。

我的代码可以根据在谷歌地图平台上定义的样式显示地图,我使用地理编码来获取我所在地点的建筑物ID。

const { Map } = await google.maps.importLibrary("maps");

let currentPosition = {lat:50.63584018637185, lng:3.070463549079457}

let map;
async function initMap() {

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map'),
    {
      zoom: 20,
      center: currentPosition,
      mapId: '<MY_MAP_ID>',
    }
  );

  const marker = new google.maps.Marker({
    position: currentPosition,
    map: map,
  });

  const geocoder = new google.maps.Geocoder();

  const latLng = { lat: 37.42, lng: -122.08 };
  
  geocoder.geocode({ location: currentPosition }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {

      const buildingId = results[0].place_id;

    } else {
      // Handle the error.
    }
  });
}

在搜索文档中寻找特定建筑物的样式时,我没有找到任何信息。但是当我问巴德(为什么不呢,它是谷歌的工具,应该知道文档^^),它回答我:

// 创建一个JavaScript对象来存储JSON文件。
const myStyle = {
  "name": "My Custom Style",
  "description": "This is my custom style for Google Maps.",
  "version": 1,
  "rules": [
    {
      "selector": "path[id='my-building-id']",
      "stylers": [
        {
          "color": "#FF0000"
        }
      ]
    }
  ]
};

// 将JSON文件加载到地图中。
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 37.42, lng: -122.08 },
  zoom: 12,
});

map.loadStyle(myStyle);

但是它不起作用,loadStyle方法未定义。巴德对他的回答很确定,但是我在网上找不到任何相关信息(也许这是一个尚未实现的功能?)

也许有人对这个功能有信息?任何帮助都将受到欢迎。

英文:

I am working on a google map, i use the Google Map Platform style creator to hide default place icon, display the building as flat. It works well. Now i am trying to changing style of a specific building (for example change color of the building i am curently in)

My code is working to display the map according to the style defined on Google Map Platform, i use geocoding to get the building id of the place i am.

const { Map } = await google.maps.importLibrary(&quot;maps&quot;);

let currentPosition = {lat:50.63584018637185, lng:3.070463549079457}

let map;
async function initMap() {

  // The map, centered at Uluru
  map = new Map(
    document.getElementById(&#39;map&#39;),
    {
      zoom: 20,
      center: currentPosition,
      mapId: &#39;&lt;MY_MAP_ID&gt;&#39;,
    }
  );

  const marker = new google.maps.Marker({
    position: currentPosition,
    map: map,
  });

  const geocoder = new google.maps.Geocoder();

  const latLng = { lat: 37.42, lng: -122.08 };
  
  geocoder.geocode({ location: currentPosition }, (results, status) =&gt; {
    if (status === google.maps.GeocoderStatus.OK) {

      const buildingId = results[0].place_id;

    } else {
      // Handle the error.
    }
  });

For styling a specific building i search in the documentation and found nothing, but when asking Bard (why not it's a google tool it should know the doc ^^) and it answser me :

// Create a JavaScript object to store the JSON file.
const myStyle = {
  &quot;name&quot;: &quot;My Custom Style&quot;,
  &quot;description&quot;: &quot;This is my custom style for Google Maps.&quot;,
  &quot;version&quot;: 1,
  &quot;rules&quot;: [
    {
      &quot;selector&quot;: &quot;path[id=&#39;my-building-id&#39;]&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#FF0000&quot;
        }
      ]
    }
  ]
};

// Load the JSON file into the map.
const map = new google.maps.Map(document.getElementById(&#39;map&#39;), {
  center: { lat: 37.42, lng: -122.08 },
  zoom: 12,
});

map.loadStyle(myStyle);

But it don't work, the loadStyle method is undefined. Bard is sure of his answer but it's weird i found nothing on the web about that (Maybe a not yet implemented feature ?)

Maybe someone have information about this feature ? Any help will be welcome

答案1

得分: 0

根据与一些非常了解这个功能的开发者的讨论,他认为这个功能目前还不存在。他认为它可能在过去的其他项目中存在,比如已经停止运营的Google地图游戏服务。但目前来说,使用Google的数据是不可能的。

但是还有其他一些数据源可以用于构建建筑物轮廓:

我将使用GlobalMLBuildingFootprints数据集。

尽管它看起来是一个不错的解决方案,但这个数据集是通过卫星数据上的人工智能生成的,有些情况下建筑物轮廓可能与Google地图上的不匹配。对我来说,它将帮助我构建建筑物轮廓,我将从数据集开始,并编辑路径以真正匹配Google地图上的建筑物轮廓。

这不是一个完美的解决方案,但目前这是我找到的唯一一个。

英文:

According to discussion with some developper that know very well this feature is not yet present. He think it was maybe present by the past for others project like dead Google map gaming service. But the answer for the moment is not possible with the google data.

But there is some other datasources for building footprints :

I will use the GlobalMLBuildingFootprints dataset.

Even if it seems a good solution, this dataset have been made by AI on satelite data, footprint can in some case not matching the google map footprint. It will be for me an help to build my footprint, it will start from the dataset and edit the path to really match the google map footprint.

It's not a perfect solution but for the moment it's the only one i found.

huangapple
  • 本文由 发表于 2023年7月27日 16:39:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76777939.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定