从数据库加载标记作为可切换的图层

Load markers from database as a toggleable layer

本文关键字：图层 数据库 加载      更新时间：2023-10-04

我正试图将数据库中的标记作为层加载到我的谷歌地图中。我已经在加载KML层，但我希望用户能够在我的数据库中保存和加载他们自己的自定义标记。

我的数据库结构如下：

| ID | TITLE | LAT | LON |

由于每个用户都有自己的自定义点，我想获得用户的点，并将它们作为地图上的一个层以及其他默认层（KML）加载。我读到创建数据层将是最好的方法，而且还使用geoJSON，我仍然不知道如何从数据库中创建它。

目前，我正在使用一个通用的json文件，只是想看看我是否真的可以将其添加为一个可切换的层，但我做不好。一旦我完成了这项工作，我就可以弄清楚如何从数据库中获得结果，并将其格式化为geoJSON，然后添加到地图中。

这就是我试图将json数据作为一个可切换的层来获取的方式，但它不起作用：

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -49.7770641, lng: 55.6602758},
    zoom: 6,
    mapTypeControlOptions: {
         position: google.maps.ControlPosition.RIGHT_TOP
      },
  });
    layers[0] = new google.maps.KmlLayer('http://www.example.com/kmllayer1.kml', {preserveViewport: true, suppressInfoWindows: false, zIndex: 1});
    layers[1] = new google.maps.KmlLayer('http://www.example.com/kmllayer2.kml', {preserveViewport: true, zIndex: 2, suppressInfoWindows: true});
    layers[2] = map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
    for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(map);
      }
}
function toggleLayer(i) {
      if(layers[i].getMap() === null) {
        layers[i].setMap(map);
      }
      else {
        layers[i].setMap(null);
      }
    }

数据层不同于KmlLayer，.loadGeoJson方法返回Data.Feature对象的数组。来自文件：

addGeoJson（geoJson：对象，选项？：数据。geoJson选项）

返回值：Array<Data.Feature>

将GeoJSON功能添加到集合中。给这个方法一个解析后的JSON。将返回导入的功能。如果无法导入GeoJSON，则引发异常。

将其添加到您的层阵列中，如下所示（注意只有一个）：

layers[2] = map.data;
layers[2].loadGeoJson(GEOJSON_URL);

概念验证小提琴

代码片段：

var geocoder;
var map;
var layers = [];
function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
}
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 43,
      lng: -87
    },
    zoom: 4,
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.RIGHT_TOP
    },
  });
  layers[0] = new google.maps.KmlLayer('http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', {
    preserveViewport: true,
    suppressInfoWindows: false,
    zIndex: 2
  });
  layers[1] = new google.maps.KmlLayer('https://developers.google.com/kml/documentation/us_states.kml', {
    preserveViewport: true,
    zIndex: 1,
    suppressInfoWindows: true
  });
  layers[2] = map.data;
  layers[2].loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson');
  for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(map);
  }
  var btns = document.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    google.maps.event.addDomListener(btns[i], 'click', (function(i) {
      return function() {
        toggleLayer(i);
      }
    })(i));
  }
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input class="btn" id="btn0" type="button" value="0" />
<input class="btn" id="btn1" type="button" value="1" />
<input class="btn" id="btn2" type="button" value="2" />
<div id="map"></div>

相关文章：