如何根据 id 导航到 google 地图上的多边形

Question

我有基本的 google 地图，其中有一堆多边形遍布整个地图。我希望能够根据地图下方文本框中给出的 ID 导航到那些多边形。

我的问题：如果我在框中输入数字并点击提交，我如何让 google 地图也查找该多边形并以它为中心？

#html

<h1>Hex Map</h1>
<div id="map_wrapper">
    <div id="map"></div>
</div>
<form>
 <label for="poly">First name:</label>
  <input type="text" id="poly" name="poly"><br><be>
 <input type="submit" value="Submit">
</form>

JS

let map;
var infowindow = null;

function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 30.1572523, lng: -92.0299477},
        zoom: 3,
    });

    google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
        //alert(map.getBounds().getNorthEast().lat());
    });

    map.data.loadGeoJson(
      "hexmap.geojson"
    );

    google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        document.getElementById('map').style.opacity = 1;
    })
    map.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1
    })

    // map.data.addListener('mouseover', function(event) {
    //     console.log(event.feature.getProperty('_uid1_'))
    //     document.getElementById('mapinfo').innerHTML = event.feature.getProperty('_uid1_');
    // })

    const constentString = 'hex + '

    map.data.addListener('click', function(event) {
        message = 'hex id: ' + event.feature.getProperty('_uid1_');
        infowindow && infowindow.close();
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(message);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);

    })


}
//"https://drive.google.com/file/d/1v-VZtbbz4H2KiMvkRcc7nL_6JKQqlHwM/view?usp=sharing'"

Answer 1

要缩放到多边形，请使用此相关问题中的函数：zoom to geojson polygons bounds in Google Maps API v3:

// zoom to the feature
var bounds = new google.maps.LatLngBounds();
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
map.fitBounds(bounds);

function processPoints(geometry, callback, thisArg) {
  if (geometry instanceof google.maps.LatLng) {
    callback.call(thisArg, geometry);
  } else if (geometry instanceof google.maps.Data.Point) {
    callback.call(thisArg, geometry.get());
  } else {
    geometry.getArray().forEach(function(g) {
      processPoints(g, callback, thisArg);
    });
  }
}

要使用它来缩放到具有 _uid1_ 属性匹配值的多边形，您可以使用 Data.forEach，检查是否需要属性匹配，然后如果找到匹配，则缩放到该特征：

var uid1 = ($("#coords input[name=coord]").val());
var feature = map.data.forEach(function(feature) {
  if (feature.getProperty("_uid1_")==uid1) {
     var bounds = new google.maps.LatLngBounds();
     processPoints(feature.getGeometry(), bounds.extend, bounds);
     map.fitBounds(bounds);
  }
})

您的“提交”按钮有问题，该按钮会将页面提交给服务器，在这种情况下，服务器会刷新页面并重新加载地图。相关问题：Stop form refreshing page on submit

live example

代码片段：

let map;
let inputGeoJson;
var infowindow = null;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 30.1572523,
      lng: -92.0299477
    },
    zoom: 3,
  });

  map.data.addGeoJson(geoJson);

  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    document.getElementById('map').style.opacity = 1;
  })
  map.data.setStyle({
    fillColor: 'green',
    strokeWeight: 1
  })

  map.data.addListener('click', function(event) {
    message = 'hex id: ' + event.feature.getProperty('_uid1_');
    infowindow && infowindow.close();
    infowindow = new google.maps.InfoWindow();
    infowindow.setContent(message);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);

  })
  // zoom to the clicked feature
  map.data.addListener('click', function(e) {
    var bounds = new google.maps.LatLngBounds();
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);
  });
}

function processPoints(geometry, callback, thisArg) {
  if (geometry instanceof google.maps.LatLng) {
    callback.call(thisArg, geometry);
  } else if (geometry instanceof google.maps.Data.Point) {
    callback.call(thisArg, geometry.get());
  } else {
    geometry.getArray().forEach(function(g) {
      processPoints(g, callback, thisArg);
    });
  }
}
$(document).ready(function() {
  $(document).on('click', '#coords', function() {
    // do your things
    document.getElementById('map').style.opacity = 0;
    console.log($("#coords input[name=coord]").val());
    document.getElementById('map').style.opacity = 1;
    var uid1 = ($("#coords input[name=coord]").val());
    var feature = map.data.forEach(function(feature) {
      if (feature.getProperty("_uid1_") == uid1) {
        var bounds = new google.maps.LatLngBounds();
        processPoints(feature.getGeometry(), bounds.extend, bounds);
        map.fitBounds(bounds);
      }
    })
    return false;
  });
});

var geoJson = {
  "type": "FeatureCollection",
  "name": "hexmap",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [{
      "type": "Feature",
      "properties": {
        "_uid1_": 7485,
        "_uid0_": 7485,
        "id": 155,
        "country": "United States"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-68.5, 45.899346400575254],
            [-68.0, 45.033320996790813],
            [-67.0, 45.033320996790813],
            [-66.5, 45.899346400575254],
            [-67.0, 46.765371804359688],
            [-68.0, 46.765371804359688],
            [-68.5, 45.899346400575254]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "_uid1_": 7486,
        "_uid0_": 7486,
        "id": 155,
        "country": "United States"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-68.5, 47.631397208144129],
            [-68.0, 46.765371804359688],
            [-67.0, 46.765371804359688],
            [-66.5, 47.631397208144129],
            [-67.0, 48.49742261192857],
            [-68.0, 48.49742261192857],
            [-68.5, 47.631397208144129]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "_uid1_": 7487,
        "_uid0_": 7487,
        "id": 155,
        "country": "United States"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [171.5, 52.827549630850761],
            [172.0, 51.96152422706632],
            [173.0, 51.96152422706632],
            [173.5, 52.827549630850761],
            [173.0, 53.693575034635202],
            [172.0, 53.693575034635202],
            [171.5, 52.827549630850761]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "_uid1_": 7488,
        "_uid0_": 7488,
        "id": 155,
        "country": "United States"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [173.0, 51.96152422706632],
            [173.5, 51.095498823281886],
            [174.5, 51.095498823281886],
            [175.0, 51.96152422706632],
            [174.5, 52.827549630850761],
            [173.5, 52.827549630850761],
            [173.0, 51.96152422706632]
          ]
        ]
      }
    },
{ "type": "Feature", "properties": { "_uid1_": 7489, "_uid0_": 7489, "id": 155, "country": "United States" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 176.0, 51.96152422706632 ], [ 176.5, 51.095498823281886 ], [ 177.5, 51.095498823281886 ], [ 178.0, 51.96152422706632 ], [ 177.5, 52.827549630850761 ], [ 176.5, 52.827549630850761 ], [ 176.0, 51.96152422706632 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7490, "_uid0_": 7490, "id": 155, "country": "United States" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 177.5, 51.095498823281886 ], [ 178.0, 50.229473419497445 ], [ 179.0, 50.229473419497445 ], [ 179.5, 51.095498823281886 ], [ 179.0, 51.96152422706632 ], [ 178.0, 51.96152422706632 ], [ 177.5, 51.095498823281886 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7491, "_uid0_": 7491, "id": 155, "country": "United States" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 177.5, 52.827549630850761 ], [ 178.0, 51.96152422706632 ], [ 179.0, 51.96152422706632 ], [ 179.5, 52.827549630850761 ], [ 179.0, 53.693575034635202 ], [ 178.0, 53.693575034635202 ], [ 177.5, 52.827549630850761 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7492, "_uid0_": 7492, "id": 155, "country": "United States" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 179.0, 51.96152422706632 ], [ 179.5, 51.095498823281886 ], [ 180.5, 51.095498823281886 ], [ 181.0, 51.96152422706632 ], [ 180.5, 52.827549630850761 ], [ 179.5, 52.827549630850761 ], [ 179.0, 51.96152422706632 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7493, "_uid0_": 7493, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -5.5, 47.631397208144129 ], [ -5.0, 46.765371804359688 ], [ -4.0, 46.765371804359688 ], [ -3.5, 47.631397208144129 ], [ -4.0, 48.49742261192857 ], [ -5.0, 48.49742261192857 ], [ -5.5, 47.631397208144129 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7494, "_uid0_": 7494, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -5.5, 49.363448015713004 ], [ -5.0, 48.49742261192857 ], [ -4.0, 48.49742261192857 ], [ -3.5, 49.363448015713004 ], [ -4.0, 50.229473419497445 ], [ -5.0, 50.229473419497445 ], [ -5.5, 49.363448015713004 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7495, "_uid0_": 7495, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -4.0, 46.765371804359688 ], [ -3.5, 45.899346400575254 ], [ -2.5, 45.899346400575254 ], [ -2.0, 46.765371804359688 ], [ -2.5, 47.631397208144129 ], [ -3.5, 47.631397208144129 ], [ -4.0, 46.765371804359688 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7496, "_uid0_": 7496, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -4.0, 48.49742261192857 ], [ -3.5, 47.631397208144129 ], [ -2.5, 47.631397208144129 ], [ -2.0, 48.49742261192857 ], [ -2.5, 49.363448015713004 ], [ -3.5, 49.363448015713004 ], [ -4.0, 48.49742261192857 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7497, "_uid0_": 7497, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -2.5, 42.435244785437497 ], [ -2.0, 41.569219381653056 ], [ -1.0, 41.569219381653056 ], [ -0.5, 42.435244785437497 ], [ -1.0, 43.301270189221938 ], [ -2.0, 43.301270189221938 ], [ -2.5, 42.435244785437497 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7498, "_uid0_": 7498, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -2.5, 44.167295593006372 ], [ -2.0, 43.301270189221938 ], [ -1.0, 43.301270189221938 ], [ -0.5, 44.167295593006372 ], [ -1.0, 45.033320996790813 ], [ -2.0, 45.033320996790813 ], [ -2.5, 44.167295593006372 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7499, "_uid0_": 7499, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -2.5, 45.899346400575254 ], [ -2.0, 45.033320996790813 ], [ -1.0, 45.033320996790813 ], [ -0.5, 45.899346400575254 ], [ -1.0, 46.765371804359688 ], [ -2.0, 46.765371804359688 ], [ -2.5, 45.899346400575254 ] ] ] } },
{ "type": "Feature", "properties": { "_uid1_": 7500, "_uid0_": 7500, "id": 156, "country": "France" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -2.5, 47.631397208144129 ], [ -2.0, 46.765371804359688 ], [ -1.0, 46.765371804359688 ], [ -0.5, 47.631397208144129 ], [ -1.0, 48.49742261192857 ], [ -2.0, 48.49742261192857 ], [ -2.5, 47.631397208144129 ] ] ] } },

  ]
}

html,
body {
  height: 100%;
  ;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  height: 100%;
  ;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map_wrapper {
  background: url(https://ressio.github.io/lazy-load-xt/dist/loading.gif) center center no-repeat;
  height: 90%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test Google Maps</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtOvrOsi7BWG_X0ezrH7316lNV8mpVDEQ&callback=initMap&v=weekly" async></script>
  <div id="map_wrapper">
    <div id="map"></div>
  </div>
  <form id="coords" action="">
    <input name="coord" value="7486" />
    <input type="button" value="submit" />
  </form>

</body>

</html>

如何根据 id 导航到 google 地图上的多边形

how to navigate to a polygon on google maps based on id

javascript

html

google-maps-api-3