<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<script src="../../js/jquery-1.9.1.min.js"></script>
<script src="../../js/highmaps/highmaps.js"></script>
<script src="../../js/highmaps/drilldown.js"></script>
<script src="../../js/highmaps/exporting.js"></script>
</head>

<body>
<!--<div id="container" style="height:450px;"></div>-->
<script type="text/javascript">

    Highcharts.setOptions({
        lang: {
            drillUpText: '< 返回 “{series.name}”'
        }
    });
    var map = null,
    // geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
    // $.getJSON(geochina + 'china.json&callback=?', function(mapdata) {//中国//https://jshare.com.cn/highmaps/FSSm7A //https://data.jianshukeji.com/
    // geochina = 'http://192.168.0.62:8082/';
    geochina = 'http://192.168.0.62:8082/jsonp/geo?filename=';
    $.getJSON(geochina + 'zhejiang.json&callback=?', function(mapdata) {//浙江
        //地图数据 https://data.jianshukeji.com/jsonp?filename=geochina/zhejiang/hangzhou.json
        //地图数据 https://data.jianshukeji.com/jsonp?filename=geochina/zhejiang.json
        var data = [];
        // 随机数据
        Highcharts.each(mapdata.features, function(md, index) {
            var tmp = {
                name: md.properties.name,
                value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
            };
            if(md.properties.drilldown) {
                tmp.drilldown = md.properties.drilldown;
            }
            data.push(tmp);
        });
        map = new Highcharts.Map('container', {
            chart: {
                events: {
                    drilldown: function(e) {
                        this.tooltip.hide();
                        console.log(e);
                        // 异步下钻
                        if (e.point.drilldown) {
                            var pointName = e.point.properties.fullname;
                            map.showLoading('下钻中，请稍后...');
                            // 获取二级行政地区数据并更新图表
                            console.dir(geochina);
                            $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                            // $.getJSON(url, function(data) {
                                data = Highcharts.geojson(data);
                                Highcharts.each(data, function(d) {
                                    if(d.properties.drilldown) {
                                        d.drilldown = d.properties.drilldown;
                                    }
                                    d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                });
                                map.hideLoading();
                                map.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                                map.setTitle({
                                    text: pointName
                                });
                            });
                        }
                    },
                    drillup: function() {
                        map.setTitle({
                            text: '浙江省'
                        });
                    }
                }
            },
            title: {
                text: '浙江省'
            },
            subtitle: {
                useHTML: true,
                // text: '点击查看 <a href="https://www.hcharts.cn/mapdata" target="_blank">地图数据及详情</a>，注意县级数据为收费数据，如果您有需要，请 <a href="https://highcharts.com.cn/data" target="_blank">联系我们购买</a>'
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<table><tr><td>{point.name}</td></tr>',
                pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' ,
                footerFormat: '</table>'
            },
            // colorAxis: {
            //     min: 0,
            //     minColor: '#fff',
            //     maxColor: '#006cee',
            //     labels:{
            //         style:{
            //             "color":"red","fontWeight":"bold"
            //         }
            //     }
            // },
            series: [{
                data: data,
                mapData: mapdata,
                joinBy: 'name',
                name: '浙江省',
                states: {
                    hover: {
                        color: '#a4edba'
                    }
                }
            }]
        });
    });
</script>
<div id="container" style="height:850px;"></div>

</body>
</html>

、、、、、、、、、、、、、、、、、、、、、

后端：
package com.hzunitech.platform.mvc.jsonp;

import com.hzunitech.platform.annotation.Controller;
import com.hzunitech.platform.mvc.base.BaseController;
import com.jfinal.log.Log;

@Controller("/jsonp")
public class JsonpController extends BaseController {

   @SuppressWarnings("unused")
   private static final Log log = Log.getLog(JsonpController.class);

   public void index() {
      // 客户端请求参数，js函数名称
      String jsonpCallback = getPara("callback"); 

      // json数据
      String json = "{'content':'我是远程b.com/remote.js带来的数据'}"; 

      // 返回jsonp格式数据
      //jquery定义了名为jsonpCallback的js函数，在渲染返回的javascript text时执行了该函数，并将数据结果作为参数传入该js函数
      renderJavascript(jsonpCallback + "(" + json + ");"); 
   }

   public void geo() {
      // 客户端请求参数，js函数名称
      String jsonpCallback = getPara("callback");
      log.info(jsonpCallback);
      System.out.println(jsonpCallback);

      // json数据
      String json = "{'content':'我是远程b.com/remote.js带来的数据'}";

      // 返回jsonp格式数据
      renderJavascript(jsonpCallback + "(" + json + ");");
   }

}
												


											
jquery的jsonp相关的更多相关文章
	

    
								
  1. jquery之jsonp相关知识
		
    这里讲的不错,可以参考:链接 我自己的理解: 服务器为了保证数据的安全,同时也为了保证不被攻击, 凡是来服务器请求的url,域名必须和服务器一致,否则就是跨域请求 为了解决跨域问题,就出现了jsonp ...
    
		
    2. 
						
  2. 使用springMVC和Jquery实现JSONP
		
    JSONP这个东东是啥我就不写了,直接贴实现的代码 JAVA代码: /** * * 查询用户是否已经提交认证获取已经是认证会员 * * 使用spring mvc的直接返回string会遇到分号转义后字 ...
    
		
    3. 
						
  3. jQuery处理JSONP
		
    http://www.g7blogs.com/?p=821 作为一枚前端,提起jsonp大家都不会陌生.特别是在我们组内的业务中,和服务器端交互的数据几乎都是采用这种形式.但假如要让你用原生的JS写出 ...
    
		
    4. 
						
  4. jQuery 调用jsonp实现与原理
		
    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...
    
		
    5. 
						
  5. jQuery的jsonp跨域是这么回事.
		
    实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...
    
		
    6. 
						
  6. jquery ajax jsonp跨域调用实例代码
		
    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
    
		
    7. 
						
  7. 基于jQuery的Jsonp跨域[Get方式]
		
    由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
    
		
    8. 
						
  8. jQuery中jsonp函数实现
		
    由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...
    
		
    9. 
						
  9. C# WebClient、jQuery ajax jsonp实现跨域
		
    WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. <转>LuaTinker的bug和缺陷
			
    LuaTinker的bug和缺陷 LuaTinker是一套还不错的C++代码和Lua代码的绑定库,作者是韩国人Kwon-il Lee,作者应该是参考了LuaBind后,为了简化和避免过重而实现的.其官 ...
    
			
    2. 
						
  2. 【Shiro】Apache Shiro架构之自定义realm
			
    [Shiro]Apache Shiro架构之身份认证(Authentication) [Shiro]Apache Shiro架构之权限认证(Authorization) [Shiro]Apache S ...
    
			
    3. 
						
  3. 解决——CSS :before、:after ，当content使用中文时有时候会出现乱码
			
    问题: 在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码. 例如我遇到 ...
    
			
    4. 
						
  4. Lintcode---区间求和 I
			
    给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end] . 对于每个查询,计算出数组中从下标 start 到 end ...
    
			
    5. 
						
  5. spring boot下WebSocket消息推送(转)
			
    原文地址:https://www.cnblogs.com/betterboyz/p/8669879.html WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.W ...
    
			
    6. 
						
  6. 在centos 5.11上安装pylint
			
    上午花了两三个小时在折腾pylint的安装. 如果是普通的linux倒也简单,只用运行一个pip install pylint就行了. 可是偏偏那么巧,服务器的版本是centos 5.11 这个版本对 ...
    
			
    7. 
						
  7. 第三篇：python函数
			
    1.python函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你 ...
    
			
    8. 
						
  8. python之histogram
			
    histogram A histogram is an accurate representation of the distribution of numerical data. It is an  ...
    
			
    9. 
						
  9. 基于Java Mina 和Netty 通信框架的JT/T809转发服务器设计
			
    Apache MINA 是 Apache 组织的一个开源项目,为开发高性能和高可用性的网络应用程序提供了非常便利的框架. 也是Java开发者的一个福利(.NET目前还没有类似封装的这么好的基础sock ...
    
			
    10. 
						
  10. undefined reference to错误
			
    最近在移植开发openssl库时,编译自己的动态库遇到undefined reference to错误,在此记录一下 从openssl官网移植openssl库,得到libssl.a和libcrypto ...
    
			
    11.