如何在谷歌地圖中顯示存盤為字串的多邊形坐標？

我的 MySQL 資料庫中存盤了一串坐標，我無法在 Google 地圖中顯示，因為它需要是一個 LatLng 物件：

'(55.46701996570562, 11.983202375732418),(55.46604683879285, 11.982086576782223),(55.465316977846335, 11.983803190551754),(55.465900867684354, 11.985863127075191)'

我知道我可以將這些坐標存盤為 POLYGON 資料型別，但由于其他一些原因我不想這樣做（與此處提及它們無關）。

當嘗試在下面的代碼中使用該坐標字串時，它顯示一個錯誤：

const polygon_coords = '(55.46701996570562, 11.983202375732418),(55.46604683879285, 11.982086576782223),(55.465316977846335, 11.983803190551754),(55.465900867684354, 11.985863127075191)';

const coords = new google.maps.Polygon({
    paths: polygon_coords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    editable: true
});

錯誤：

InvalidValueError: 在索引 0: 不是具有有限坐標的 LatLng 或 LatLngLiteral: 不是物件

知道如何將該坐標字串轉換為谷歌識別的格式，例如LatLng或LatLngLiteral？

uj5u.com熱心網友回復：

您可以將坐標轉換為 LatLng[] 坐標，如下所示：

const polygon_coords = `(55.46701996570562, 11.983202375732418),
  (55.46604683879285, 11.982086576782223),
  (55.465316977846335, 11.983803190551754),
  (55.465900867684354, 11.985863127075191)`

  // Surround with [] to make an outer array.
  // and replace ( and ) with [ and ] to make inner arrays
  const jsonArray = `[
    ${polygon_coords.replace(/\)/g, ']')
                    .replace(/\(/g, '[')}
  ]`
  console.log(`Your json array: \n${jsonArray}\n`)

  const parsedCoords = JSON.parse(jsonArray)
  console.log(`${parsedCoords}\n`)

  // Assuming your coords are (lat,lng) order
  const latLngs = parsedCoords.map(pair => ({lat: pair[0], lng: pair[1]}))

  console.log(latLngs)
  const coords = new google.maps.Polygon({
    paths: latLngs,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    editable: true
  });

uj5u.com熱心網友回復：

1. 將polygon_coords字串決議為其單獨的坐標，使用它們來創建google.maps.LatLngLiteralgoogle.maps. or google.maps.LatLng` 物件

var polygon_coords_str = '(55.46701996570562, 11.983202375732418),(55.46604683879285, 11.982086576782223),(55.465316977846335, 11.983803190551754),(55.465900867684354, 11.985863127075191)';
  polygon_coords_str = polygon_coords_str.substring(1, polygon_coords_str.length - 1);
  polygon_coords_str = polygon_coords_str.split("),(");
  var polygon_coords = [];
  for (var i = 0; i < polygon_coords_str.length; i  ) {
    polygon_coords.push({ // create a google.maps.LatLngLiteral
      // assume original data is (lat, lng)
      lat: parseFloat(polygon_coords_str[i].split(',')[0]),
      lng: parseFloat(polygon_coords_str[i].split(',')[1])
    })
  }

2. 使用這些來創建多邊形：

  const coords = new google.maps.Polygon({
    paths: polygon_coords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    editable: true
  });

代碼片段：

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: {
      lat: 55.4,
      lng: 11.9
    },
    mapTypeId: "terrain",
  });
  var polygon_coords_str = '(55.46701996570562, 11.983202375732418),(55.46604683879285, 11.982086576782223),(55.465316977846335, 11.983803190551754),(55.465900867684354, 11.985863127075191)';
  polygon_coords_str = polygon_coords_str.substring(1, polygon_coords_str.length - 1);
  polygon_coords_str = polygon_coords_str.split("),(");
  // console.log(polygon_coords_str);
  var polygon_coords = [];
  for (var i = 0; i < polygon_coords_str.length; i  ) {
    polygon_coords.push({
      lat: parseFloat(polygon_coords_str[i].split(',')[0]),
      lng: parseFloat(polygon_coords_str[i].split(',')[1])
    })
  }
  console.log("polygon_coords.length="   polygon_coords.length);
  for (var i = 0; i < polygon_coords.length; i  ) {
    console.log(polygon_coords[i]);
  }
  const coords = new google.maps.Polygon({
    paths: polygon_coords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    editable: true
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coords.getPath().getLength(); i  )
    bounds.extend(coords.getPath().getAt(i));
  map.fitBounds(bounds);
  coords.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<!DOCTYPE html>
<html>

<head>
  <title>Simple Polygon</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
</body>

</html>

標籤：javascript 谷歌地图 google-maps-api-3 多边形

上一篇：如何使用ajax在php頁面中從json添加標記？

下一篇：比較C#.NET中串列中的元素是否幾乎相等