前台读取本地数据文件//从本地读取json数据 $.ajax({ url: "static/json/map_data.json",

在写前台页面的时候，三两个的固定数据写在页面还可以接受，如果是地图信息之类的大数据要还是写在页面的话我可能就疯了，

{
                "海门":[121.15,31.89],
                "鄂尔多斯":[109.781327,39.608266],
                "招远":[120.38,37.35],
                "舟山":[122.207216,29.985295],
                "齐齐哈尔":[123.97,47.33],
                "盐城":[120.13,33.38],
                "赤峰":[118.87,42.28],
                "青岛":[120.33,36.07],
                "乳山":[121.52,36.89],
                "金昌":[102.188043,38.520089],
                "泉州":[118.58,24.93],
                "莱西":[120.53,36.86],
                "日照":[119.46,35.42],
                "胶南":[119.97,35.88],
                "南通":[121.05,32.08],
                "拉萨":[91.11,29.97],
                "云浮":[112.02,22.93],
                "梅州":[116.1,24.55],
                "文登":[122.05,37.2],
                "上海":[121.48,31.22],
                "攀枝花":[101.718637,26.582347],
                "威海":[122.1,37.5],
                "承德":[117.93,40.97],
                "厦门":[118.1,24.46],
                "汕尾":[115.375279,22.786211],
                "潮州":[116.63,23.68],
                "丹东":[124.37,40.13],
                "太仓":[121.1,31.45],
                "曲靖":[103.79,25.51],
                "烟台":[121.39,37.52],
                "福州":[119.3,26.08],
                "瓦房店":[121.979603,39.627114],
                "即墨":[120.45,36.38],
                "抚顺":[123.97,41.97],
                "玉溪":[102.52,24.35],
                "张家口":[114.87,40.82],
                "阳泉":[113.57,37.85],
                "莱州":[119.942327,37.177017],
                "湖州":[120.1,30.86],
                "汕头":[116.69,23.39],
                "昆山":[120.95,31.39],
                "宁波":[121.56,29.86],
                "湛江":[110.359377,21.270708],
                "揭阳":[116.35,23.55],
                "荣成":[122.41,37.16],
                "连云港":[119.16,34.59],
                "葫芦岛":[120.836932,40.711052],
                "常熟":[120.74,31.64],
                "东莞":[113.75,23.04],
                "河源":[114.68,23.73],
                "淮安":[119.15,33.5],
                "泰州":[119.9,32.49],
                "南宁":[108.33,22.84],
                "营口":[122.18,40.65],
                "惠州":[114.4,23.09],
                "江阴":[120.26,31.91],
                "蓬莱":[120.75,37.8],
                "韶关":[113.62,24.84],
                "嘉峪关":[98.289152,39.77313],
                "广州":[113.23,23.16],
                "延安":[109.47,36.6],
                "湘潭":[112.91,27.87],
                "金华":[119.64,29.12],
                "岳阳":[113.09,29.37],
                "长沙":[113,28.21],
                "衢州":[118.88,28.97],
                "廊坊":[116.7,39.53],
                "菏泽":[115.480656,35.23375],
                "合肥":[117.27,31.86],
                "武汉":[114.31,30.52],
                "大庆":[125.03,46.58]
            }

刚开始为了完成页面，东拼西凑的完成了效果，之后就要对代码进行一定的优化了，不一定性能提升多少，最起码看着舒服。

直接将数据粘贴了过去，保留json格式，其他多余的都不要。

接下来就是怎么在获取json文件重点的数据，第一反应就是ajax，

//从本地读取json数据
        $.ajax({
              url: "static/json/map_data.json",
              async:false,
              success: function(result){
                    geoCoordMap = result;
                },
              dataType: 'json',
            });

刚开始没有考虑同步异步的问题，就导致数据在success函数中有值，外面就没值，因为之前做java项目的时候遇到过这个问题，所以很快就知道将async改为false，默认为true的，结果效果就出来了

 

在最初查资料的时候还遇见了jsonp的方法，照着做的时候遇到了问题：

<script type="text/javascript" src="{% static 'json/map_data.json' %}?callback=geoCoordMap"></script>

数据能够获取到，但是后面的geoCoordMap方法找不到。浏览器也没报找不到function 的错误。

就很奇怪，我在geoCoordMap方法中就单独的一个alert('1')就不行，所以后来也就放弃使用jsonp这个技术了。回头写个小demo试验一下好了。还是用ajax的方式吧。