javascript - 如何将数据映射到 map (Google map )上的邮政编码？

Question

我不确定这里的问题标题，所以如果您有更好的想法，请提出编辑建议。

我正在使用 JavaScript 和 PHP 构建一个 Web 应用程序；这是一个内部仪表板。

我编写了一个数据库查询，其结果如下所示:

我编写了一个 PHP 脚本，它连接到我们的数据库并以 JSON 格式返回结果，如下所示:

[  
    {  
        "POSTCODE":"BA14 6RU",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"BH11 8NX",
        "ORDERS":"20"
    },
    {  
        "POSTCODE":"BH12 4NU",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"BH12 4PA",
        "ORDERS":"27"
    },
    {  
        "POSTCODE":"BH15 4PT",
        "ORDERS":"10"
    },
    {  
        "POSTCODE":"BH17 7BD",
        "ORDERS":"17"
    },
    {  
        "POSTCODE":"BS15 4TA",
        "ORDERS":"18"
    },
    {  
        "POSTCODE":"BS3 2SU",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"BS3 5QY",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"BS30 8XT",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"C04 9HT",
        "ORDERS":"14"
    },
    {  
        "POSTCODE":"CF33 4AH",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"CF33 6BJ",
        "ORDERS":"17"
    },
    {  
        "POSTCODE":"CF33 6BN",
        "ORDERS":"12"
    },
    {  
        "POSTCODE":"CF44 6DA",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"CF63 2BE",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"CF83 8DW",
        "ORDERS":"8"
    },
    {  
        "POSTCODE":"CM16 6NR",
        "ORDERS":"8"
    },
    {  
        "POSTCODE":"CM5 9JH",
        "ORDERS":"6"
    },
    {  
        "POSTCODE":"CM8 3HP",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"CM8 3UW",
        "ORDERS":"15"
    },
    {  
        "POSTCODE":"CO3 8ND",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"CO4 5HW",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"DN11 8SP",
        "ORDERS":"31"
    },
    {  
        "POSTCODE":"DN41 8DG",
        "ORDERS":"22"
    },
    {  
        "POSTCODE":"E15 3LX",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"FN14 6LH",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"GU15 2QU",
        "ORDERS":"16"
    },
    {  
        "POSTCODE":"GU15 2QW",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"GU35 9QF",
        "ORDERS":"10"
    },
    {  
        "POSTCODE":"GU51 3RN",
        "ORDERS":"10"
    },
    {  
        "POSTCODE":"HA2 9EF",
        "ORDERS":"7"
    },
    {  
        "POSTCODE":"HA4 0JS",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"HP11 1EL",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"HP6 6JQ",
        "ORDERS":"6"
    },
    {  
        "POSTCODE":"IP7 6RL",
        "ORDERS":"8"
    },
    {  
        "POSTCODE":"LE6 0JL",
        "ORDERS":"17"
    },
    {  
        "POSTCODE":"LN6 3RY",
        "ORDERS":"9"
    },
    {  
        "POSTCODE":"ME12 1LY",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"N17 9LJ",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"NG24 2DZ",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"NG31 9SE",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"NN1 2JW",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"NN11 4HU",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"NP11 4SB",
        "ORDERS":"11"
    },
    {  
        "POSTCODE":"NP26 3TF",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"NP44 1TY",
        "ORDERS":"13"
    },
    {  
        "POSTCODE":"NR6 6AG",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"NR6 6NN",
        "ORDERS":"6"
    },
    {  
        "POSTCODE":"PE1 5YB",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"PE7 3EL",
        "ORDERS":"15"
    },
    {  
        "POSTCODE":"PO13 0FG",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"PO14 1FD",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"PO14 1NP",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"PO16 8TT",
        "ORDERS":"24"
    },
    {  
        "POSTCODE":"PO4 8PY",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"PO6 1SQ",
        "ORDERS":"11"
    },
    {  
        "POSTCODE":"RG1 8EQ",
        "ORDERS":"22"
    },
    {  
        "POSTCODE":"RG1 8LG",
        "ORDERS":"4"
    },
    {  
        "POSTCODE":"RG12 1RL",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"RG2 OHG",
        "ORDERS":"8"
    },
    {  
        "POSTCODE":"RG24 7AT",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"RG24 8NA",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"RG7 1PQ",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"RG7 4AZ",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"RG9 5LA",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"RH4 1QT",
        "ORDERS":"7"
    },
    {  
        "POSTCODE":"S015 3AS",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"S030 2PA",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SA1 3JA",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA10 6RR",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA10 7DN",
        "ORDERS":"10"
    },
    {  
        "POSTCODE":"SA12 6LN",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"SA14 6RB",
        "ORDERS":"11"
    },
    {  
        "POSTCODE":"SA14 8LQ",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA18 2HX",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA18 3SJ",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SA4 9DW",
        "ORDERS":"8"
    },
    {  
        "POSTCODE":"SA4 9WF",
        "ORDERS":"6"
    },
    {  
        "POSTCODE":"SA48 8LT",
        "ORDERS":"6"
    },
    {  
        "POSTCODE":"SA5 4DL",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"SA5 4SF",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SA5 8JY",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA6 5BQ",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA6 8QR",
        "ORDERS":"26"
    },
    {  
        "POSTCODE":"SA6 8RF",
        "ORDERS":"13"
    },
    {  
        "POSTCODE":"SA7 0AE",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SA7 9FU",
        "ORDERS":"1"
    },
    {  
        "POSTCODE":"SA7 9QY",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SA8 4EZ",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"SN2 2NP",
        "ORDERS":"34"
    },
    {  
        "POSTCODE":"SN2 2PQ",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":"SO30 2PA",
        "ORDERS":"17"
    },
    {  
        "POSTCODE":"SO32 2QE",
        "ORDERS":"5"
    },
    {  
        "POSTCODE":"SS13 1DJ",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SS14 3DB",
        "ORDERS":"3"
    },
    {  
        "POSTCODE":"SS2 5RN",
        "ORDERS":"38"
    },
    {  
        "POSTCODE":"SS6 7UY",
        "ORDERS":"7"
    },
    {  
        "POSTCODE":"TW17 8RX",
        "ORDERS":"21"
    },
    {  
        "POSTCODE":"WD1 8SR",
        "ORDERS":"2"
    },
    {  
        "POSTCODE":null,
        "ORDERS":"35"
    }
]

我需要显示英国 map (从技术上讲，我只需要英格兰和威尔士)并显示我们今天要送货的地方。

圆圈的大小取决于我们向该邮政编码与其他邮政编码相比交付的订单数量，并且还需要包含订单数量。

有什么东西可以用来做这种事情吗？

Answer 1

您正在寻找的内容称为热图 ( https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap )。有很多好的谷歌地图插件可以为您做到这一点。您还可以尝试 MarkerCluster ( http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html )。

更简单的解决方案是使用圆形的自定义标记图标，只需根据该邮政编码的投递数量来更改其大小即可。