时间戳

首页 > 解决方案 > 如何在谷歌地图中显示存储为字符串的多边形坐标？

javascript - 如何在谷歌地图中显示存储为字符串的多边形坐标？

问题描述

我有一个坐标字符串存储在我的 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：不是对象

知道如何将该坐标字符串转换为 Google 可识别的格式，例如LatLng或LatLngLiteral吗？

标签： javascriptgoogle-mapsgoogle-maps-api-3polygon

解决方案

  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])
    })
  }
  1. 使用这些来创建多边形：
  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>

推荐阅读