javascript - 为什么 fusionMap.js 插件会改变 Google map 的起始位置？

Question

所以我很长一段时间以来一直在尝试设计自定义谷歌地图(Fusion Tables)的样式。我终于找到了这个插件“fusionMap.js”，它可以让我引用一些可以更改颜色等的选项。

除了包含 jQuery 和插件之外，我唯一需要添加的代码是......

    $('#map').fusionMap({
        publishedtable: 'https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=-0.11780194013670364&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG', // Link to published map
        mapstyles: 'scripts/maps/paledown.js' // Path to map
    });

这很棒，并且可以用于设计 map 样式，但是当我去测试此页面时， map 并未在其应有的位置开始。奇怪的是，当您访问此代码中的 URL 时，它会正确显示......

https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=-0.11780194013670364&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

...但是 jQuery 中似乎没有任何内容可以改变位置。有谁知道它为什么会移动，或者如果这不能正常工作，有人知道另一种设计这些 map 样式的方法吗？

这是一张可爱的彩色但位置错误的 map ... http://thetally.efinancialnews.com/tallyassets/hedgefundmap/index.html

Answer 1

这是因为该插件仅适用于正坐标

来自源代码:

parseUrl: function(url){
    var lat = url.match(/lat=(\d*).(\d*)/);    // will only match positive numbers
    this.options.lat = lat[1] + '.' + lat[2];

    var lng = url.match(/lng=(\d*).(\d*)/);    // will only match positive numbers
    this.options.lng = lng[1] + '.' + lng[2];

    var styledId = url.match(/y=(\d*)/);
    this.options.styledId = parseInt(styledId[1]);

    var templateId = url.match(/tmplt=(\d*)/);
    this.options.templateId = parseInt(templateId[1]);

    var zoom = url.match(/&z=(\d*)/);
    this.options.zoom = parseInt(zoom[1]);

    var column = url.match(/col+(\d*)/);
    this.options.column = 'col'+column[1];

    var tableid = url.match(/from\+(.+)&viz/);
    this.options.tableid = tableid[1];
},

我无法在 jsfiddle 上设置示例，但为了证明我的假设，请查看以下链接，其中我将经度值替换为零(如插件“所见”)。

https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=0&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

要解决此问题，您必须稍微调整用于提取坐标的正则表达式。只需在第一组中添加 -? 即可:

var lat = url.match(/lat=(-?\d*).(\d*)/);
this.options.lat = lat[1] + '.' + lat[2];

var lng = url.match(/lng=(-?\d*).(\d*)/);
this.options.lng = lng[1] + '.' + lng[2];