javascript - Maps API 中的哪些最新更改可能导致标记向右移动并消失?

标签 javascript google-maps google-chrome svg google-maps-api-3

我检查了我制作的 map 应用程序,发现我的标记已经转移,并且只有在页面缩小时才会显示在 Chrome 中。多边形渲染良好,但标记不再在 Firefox 中渲染,并在 Chrome 中移动(当它们出现时)。

在屏幕截图中,您可以看到标记不再像应有的那样位于曼哈顿上方。

Shifted markers in Chrome

最近对 Maps API 的哪些更改可能导致了这种情况?我查看了过去几个月的发行说明,似乎没有任何内容适用于这种突然的转变。

这是我如何创建标记的片段:

$.each(data[i], function(key, val){
  var myLatlng = new google.maps.LatLng(val.lat, val.long);
  var marker = new google.maps.Marker({
      position: myLatlng,
      icon: {
        url: markerIcon,
        anchor: new google.maps.Point(30,30),
      },
      map: map,
  });
  markers.push(marker);
});

我已经尝试指定发布 (3.25) 和卡住 (3.24) 版本,但遇到了同样的问题。几个月前,我一直在使用实验性的(未指定版本)并将标记加载到适当的位置。

编辑:

我发现使用 SVG 作为我的标记存在问题。 url: markerIcon, 中的 markerIcon 是 SVG 文件的路径。如果我使用 PNG 或 JPG 文件,问题就解决了。

研究使用 Symbols 代替我的 SVG。仍然不确定 Chrome、Firefox 或 Maps API 中的哪些更改会导致这个新错误。

最佳答案

更新我的标记以使用符号来保存 SVG 信息而不是链接到 SVG 文件有效:

      var transparentCircle = {
        path: 'M-5,0a5,5 0 1,0 10,0a5,5 0 1,0 -10,0',
        fillColor: 'red',
        fillOpacity: 0.5,
        scale: 1,
        strokeWeight: 0
      };

      ...
      var marker = new google.maps.Marker({
          position: myLatlng,
          icon: transparentCircle,
          map: map,
      });

但是,仍然不确定 Chrome、FF 或 Maps API 中的哪些更改破坏了原始 SVG 设置。

关于javascript - Maps API 中的哪些最新更改可能导致标记向右移动并消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39382695/

相关文章:

javascript - Chrome 31.0 HTML5 Canvas 绘制图像

HTML5 输入日期日历样式

css - Chrome 开发工具 : If I map my local resources to network resources my source map links in the style inspector disappears

javascript - 无法理解为什么状态内的单个数组不起作用

ios - Google Maps iOS + Storyboard + Segue = 崩溃

javascript - Mongodb $inc 嵌入值语法

php - 如何将 Google map "Embed map"链接转换为 "Share link"

android - GoogleMap 上的滑动抽屉

javascript - 通过动态枚举其他对象的键来创建新对象

javascript - 通过 JavaScript 获取所有命名的 CSS 颜色