如何将数据映射到地图上的邮政编码(Google地图)?

时间:2015-05-27 15:50:08

标签: javascript php jquery google-maps maps

我对这里的问题标题不确定,所以如果你有更好的主意,请建议编辑。

我正在使用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"
    }
]

我需要显示一张英国地图(技术上我只需要英格兰和威尔士),并展示我们今天提供的圈子。

圈子需要大或小,这取决于我们与其他邮政编码相比,我们提供给该邮政编码的订单数量,还需要包含订单数量。

那里有什么我可以用来做这种事吗?

1 个答案:

答案 0 :(得分:1)

您正在寻找的是热图(https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap)。谷歌地图有很多很好的插件可以帮到你。您也可以尝试使用MarkerCluster(http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html)。

更简单的解决方案是使用一个圆形的自定义标记图标,并根据该邮政编码的交付次数更改其大小。