javascript - 放大时增加自定义标记的大小？使用 Google map 和 GeoJSON-6ren

javascript - 放大时增加自定义标记的大小？使用 Google map 和 GeoJSON

转载作者：行者123 更新时间：2023-12-03 07:10:36

25

4

我有一张 map ，通过 GeoJSON 文件调用 150 个位置，每个位置都由自定义图像 (22px,17px) 表示。当放大(缩放 17 后)时，问题就出现了，这些标记看起来相对较小。我想知道是否有一种方法可以确保每次放大时图标的大小都相同。

这是代码:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false &libraries=visualization"></script>

  <script>
    var map;

    function initialize() {


      var mapOptions = {
        zoom: 13,
        scrollwheel: true,
        panControl: true,
        zoomControl: true,
        scaleControl: false,
        disableDefaultUI: false,
        center: new google.maps.LatLng(19.043516, -98.198232),
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
      };

      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);



      var script = document.createElement('script');
      script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
      document.getElementsByTagName('head')[0].appendChild(script);


      map.data.setStyle(function(feature) {
        var mag = 3;
        var grd = feature.getProperty('Grd');
        var ctgData = feature.getProperty('Ctg');
        var ctgColor = {
          "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
          "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
          "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
        };
        return ({
          icon: ctgColor[ctgData]
        });
      });

    }

    function eqfeed_callback(results) {
      map.data.addGeoJson(results);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

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

</html>

我在这里看到了一些解决方案，但我不知道从外部调用 GeoJSON 文件时如何应用它。 (How to set Google maps marker size dynamically)

最佳答案

您可以像 question you reference 中那样放大现有标记。

google.maps.event.addListener(map, 'zoom_changed', function() {
  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    var size;
    var zoom = map.getZoom(); 
    if (zoom > 13) {
      size = new google.maps.Size(44,34);
    } else {
    size = new google.maps.Size(22,17);
    }
    return ({
      icon: {url: ctgColor[ctgData],
      size: size,
      scaledSize: size}
    });
  });
})

它们会变得模糊，您最好为更高的缩放级别创建单独的标记。

代码片段:

var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    scrollwheel: true,
    panControl: true,
    zoomControl: true,
    scaleControl: false,
    disableDefaultUI: false,
    center: new google.maps.LatLng(19.043516, -98.198232),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var script = document.createElement('script');
  script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
  document.getElementsByTagName('head')[0].appendChild(script);


  map.data.setStyle(function(feature) {
    var mag = 3;
    var grd = feature.getProperty('Grd');
    var ctgData = feature.getProperty('Ctg');
    var ctgColor = {
      "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
      "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
      "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
    };
    return ({
      icon: ctgColor[ctgData]
    });
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    map.data.setStyle(function(feature) {
      var mag = 3;
      var grd = feature.getProperty('Grd');
      var ctgData = feature.getProperty('Ctg');
      var ctgColor = {
        "Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
        "Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
        "Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
      };
      var size;
      var zoom = map.getZoom();
      document.getElementById("zoom").innerHTML = zoom;
      if (zoom > 13) {
        size = new google.maps.Size(44, 34);
      } else {
        size = new google.maps.Size(22, 17);
      }
      return ({
        icon: {
          url: ctgColor[ctgData],
          size: size,
          scaledSize: size
        }
      });
    });
  })
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="zoom"></div>
<div id="map-canvas"></div>

关于javascript - 放大时增加自定义标记的大小？使用 Google map 和 GeoJSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36622792/

25

4

0

文章推荐： amazon-web-services - 从 cloudformation 启用 ALB 的访问日志记录

文章推荐： reactjs - 如何在reactjs中调用stopPropagation？

文章推荐： amazon-web-services - 如何使用 CloudFormation 强制删除 AWS ECR？

geojson - 无法使用以下驱动程序打开数据源 `GeoJSON'
我正在尝试按照此链接 http://bost.ocks.org/mike/map/ 上的教程进行操作到目前为止，我已经完全按照列出的每条说明进行操作，但是当我尝试运行“#Converting Data
geojson - 如何反转 GeoJson-Polygon
何我可以反转一个国家的 GeoJson，以便它将国家定义为世界地图多边形中的一个洞？我需要这个来在 OpenLayers 5.3 中创建 GeoJson VectorLayer 的蒙版。最佳答案在
leaflet - 将 GeoJSON 放在传单 map 上 : Invalid GeoJSON object. 抛出新错误 ('Invalid GeoJSON object.' );
我在构建 GeoJSON 并将其放在 map 上的传单代码方面遇到了一些麻烦。 GeoJSON 是根据服务的 XML 响应构建的。错误是无效的 GeoJSON 对象。 throw new Erro
geojson - Mapbox gl geojson 图层在更高的缩放比例下消失
我有一个 geojson 表示插值天气数据的等高线层。某些轮廓在更高的缩放级别消失，如以下屏幕抓图所示。将多边形作为图层添加到 Mapbox 时，使用以下代码: map.addSource('min
javascript - 将 GeoJSON 加入另一个 GeoJSON
我有一些地理边界 have a GeoJSON endpoint for . 我还有一些变量存储在单独的 GeoJSON endpoint 中它没有坐标，但确实有我想稍后使用 D3 对 map 进行主
geojson - 如何向 MapBox 显示巨大的 GeoJSON 文件？
我是 MapBox GL Js 的新手，我想通过 https 调用一个大的 GeoJSON 文件并将其显示到 map 上。我认为调用 vector Tile 是最好的方法，我找到了一些教程，展示了如
geojson - 如何导入 GeoJSON 文件以便在 Google 地球引擎代码编辑器中使用？
我已经使用 SQL 到 geoJSON 生成了我的数据库的一些兴趣点。地理数据: { "FeatureCollection" : [ { "g
javascript - 从 geojson 围绕 geojson 中的每个点创建多边形
创建一张与此处找到的 map 类似的 map : https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardi
javascript - GeoJson amchart maps geoJson 有什么问题？
我对 ammCharts 比较陌生，这也是我第一次尝试创建 geoJSON 文件。以下是我的geoJson文件: GeoJSON file 这就是我要实现的目标: example 当我加载我的 ge
javascript - 当存在多个 geojson 文件时，从单个 geojson 投影数据
我有几个 geojson 层，并且我使用组将其分层。我使用此处找到的 Mike 答案将 map 集中在给定的 geojson 文件上 -> Center a map in d3 given a geo
geojson - 使用 REST API 的环回存储 geojson 数据的最佳方法
环回新手，但设置我的第一个基于节点的 RestAPI 很有趣。我能够创建模型并在数据存储中创建关联的表。我的模型需要具有数据类型 geojson 的属性，即以下形式的字符串: { “类型”:“特征”，
javascript - 传单 : Handling a GeoJSON composed of multiple GeoJSON
我使用传单构建了一个 map ，其中包含大的 GeoJSON 区域，这些区域由多个“较小”的 GeoJSON 区域组成。我正在使用 Leaftet-Ajax 来这样调用它们: var Rennes
javascript - L.geoJSON - 如何使用更多 L.geoJSON 坐标处理多个引用文件？
我已经能够让其中的一部分工作，但是当 properties.affectedZones 有多个条目时，我的 jQuery 失败了。我已经使用 .each 努力显示受到红旗警告的受影响区域，但是当有两个
javascript - 传单 geojson 样式函数功能仅颜色 1 geojson 功能
我需要对从 geojson 文件中提取的每个功能进行不同的样式设置。然而，这个匿名样式函数仅更改它遇到的第一个功能的样式并停止。我是传单新手。看过几个演示，但找不到这个匿名样式函数仅更改第一个功能的样
php - 如何将多个 geojson 合并到一个 FeatureCollection 中的一个 geojson
我有多个 geojson 类型:存储在 Mysql 中的 FeatureCollection。我想将两个或多个 geojson 合并到一个 FeatureCollection geojson 中并显示
geojson - 从 mapbox gl 中的 geojson 获取图标 url
我有这个 geojson { "type":"FeatureCollection", "features":[ { "type":"Feature",
geojson - 铯 - 范围错误 : Invalid Array Length on Validated geoJson
我正在尝试在基于标准 HelloWorld 示例应用程序的测试应用程序中加载以下 geoJson 文件。 { "type": "FeatureCollection", "generator":
javascript - 传单 : setting icon for GeoJSON layer from GeoJSON property
我正在使用 GeoJSON 数据构建传单 map 。尝试根据 GeoJSON 属性设置我使用的图标时遇到问题。我认为我的错误与使用字符串调用对象有关，但我无法弄清楚它到底是什么。这是我的代码: Ge
mongodb - $near 需要 geojson 点，给定 geojson 点
我有包含如下地理字段的文档。 "geo" : { "type" : "Point", "coordinates" : [ 37.44609999, -1
javascript - 是否可以使用 JavasScript 确定 GeoJSON 点是否在 GeoJSON 多边形内？
是否可以仅使用 JavaScript(通过 d3、topojson 或任何其他方式)确定给定纬度、经度的 GeoJSON 点是否位于给定 GeoJSON 多边形内？例如，我可以根据教程 here 绘

首页

博学

6Ren·AI

商城

javascript - 放大时增加自定义标记的大小？使用 Google map 和 GeoJSON