环境介绍
Openlayers ol.js v5.3.0
Highcharts highcharts.js v7.0.1
jquery jquery-3.3.1.js v3.3.1

显示效果

地图放大缩小对统计图的大小无影响

以饼状图为例

1、添加地图，并渲染统计图所在的点位，

  1. vector是渲染feature需要用的图层，一定要保证在所有图层的最前方，否则渲染的feature会被遮盖，（地图量算时由于这个问题搞了一上午）
  1. sourceMeasure = new ol.source.Vector({ wrapX: false });
  2.  
  3.     vector = new ol.layer.Vector({
  4.         source: sourceMeasure,
  5.         style: new ol.style.Style({
  6.             fill: new ol.style.Fill({
  7.                 color: 'rgba(255, 255, 0, 0.2)'
  8.             }),
  9.             stroke: new ol.style.Stroke({
  10.                 color: '#ffcc33',
  11.                 width: 2
  12.             }),
  13.             image: new ol.style.Circle({
  14.                 radius: 7,
  15.                 fill: new ol.style.Fill({
  16.                     color: '#ffaa33'
  17.                 })
  18.             })
  19.         })
  20.     });
  21.  
  22.     map = new ol.Map({
  23.         controls: ol.control.defaults({
  24.             attribution: false
  25.         }),
  26.         target: 'map',
  27.         layers: [
  28.             new ol.layer.Tile({
  29.                 source: new ol.source.OSM()
  30.             }),
  31.             vector
  32.         ],
  33.         view: new ol.View({
  34.             projection: 'EPSG:3857',
  35.             center: ol.proj.transform([121, 37], 'EPSG:4326', 'EPSG:3857'),
  36.             //center: [121, 37],
  37.             zoom: 6
  38.         })
  39.     });
  40.  
  41.     DrawPoint();

2、画点的方法

  1. function DrawPoint() {
  2.     for (var i = 0; i < dataPie.length; i++) {
  3.         var d = dataPie[i];
  4.         var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  5.  
  6.         var point = new ol.geom.Point(pt);
  7.  
  8.         var feature = new ol.Feature(point);
  9.  
  10.         sourceMeasure.addFeature(feature);
  11.     }
  12. }

3、添加统计图

下面是原始的方法，可以显示统计图，但是初始位置不对，但是稍微拖动下地图，位置又跳到对的位置了，没找到问题，换成了后面的方法2

  1. //方法1
    //$("#addPieChart").on("click", function () {
  2. //    clearChartOverlay();
  3. //    for (var i = 0; i < dataPie.length; i++) {
  4. //        var d = dataPie[i];
  5. //        var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  6. //        var domid = "chart" + guid();
  7. //        $("#chart").append("<div id='" + domid + "'></div>");
  8. //        var chart = new ol.Overlay({
  9. //            id: domid,
  10. //            position: pt,
  11. //            positioning: "bottom-center",
  12. //            element: document.getElementById(domid),
  13. //            offset: [0, 18],
  14. //            stopEvent: false  //overlay也支持滚珠放大缩小
  15. //        });
  16. //        map.addOverlay(chart);
  17. //        addPieChart(domid, d, 100);
  18. //        overlayId.push(domid);
  19. //    }
  20. //});

可能是因为对Overlay的element做了设置解决的这个问题，比较玄学

  1. //方法2 
    $("#addPieChart").on("click", function () {
  2.         clearChartOverlay();
  3.         for (var i = 0; i < dataPie.length; i++) {
  4.             var d = dataPie[i];
  5.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  6.             var domid = "chart" + guid();
  7.             $("#chart").append("<div id='" + domid + "'></div>");
  8.  
  9.             addPieChart(domid, d, 100);
  10.  
  11.             var chart = new ol.Overlay({
  12.                 id: domid,
  13.                 element: document.getElementById(domid),
  14.                 positioning: "bottom-center", //统计图和渲染点位的位置关系
  15.                 offset: [0, 18],//如果统计图相对于点位又偏移，可以通过此属性将统计图移回来
  16.                 stopEvent: false  //overlay也支持滚珠放大缩小
  17.             });
  18.             map.addOverlay(chart);
  19.  
  20.             var element = chart.getElement();
  21.             chart.setPosition(pt);
  22.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  23.             $(element).popover({
  24.                 placement: 'top',
  25.                 animation: false
  26.             });
  27.             $(element).popover('show');
  28.  
  29.             overlayId.push(domid);
  30.         }
  31.     });

　　移除所有用来显示统计图的Overlay，和饼图的方法，highcharts里很多，想要别的风格可以去看highcharts的api

  1. /**
  2.  * 移除统计图所使用的Overlay
  3.  * */
  4. function clearChartOverlay() {
  5.     for (var i = 0; i < overlayId.length; i++) {
  6.         map.removeOverlay(map.getOverlayById(overlayId[i]));
  7.     }
  8. }
  9.  
  10. function addPieChart(domid, data, size) {
  11.     $('#' + domid).highcharts({
  12.         chart: {
  13.             backgroundColor: 'rgba(255, 255, 255, 0)',
  14.             plotBorderColor: null,
  15.             plotBackgroundColor: null,
  16.             plotBackgroundImage: null,
  17.             plotBorderWidth: null,
  18.             plotShadow: false,
  19.             width: size,
  20.             height: size
  21.         },
  22.         tooltip: {
  23.             pointFormat: '<b>{point.percentage:.1f}%</b>'
  24.         },
  25.         credits: {
  26.             enabled: false
  27.         },
  28.         title: {
  29.             text: ''
  30.         },
  31.         plotOptions: {
  32.             pie: {
  33.                 dataLabels: {
  34.                     enabled: false
  35.                 }
  36.             }
  37.         },
  38.         series: [{
  39.             type: 'pie',
  40.             name: data.name,
  41.             data: data.data
  42.         }]
  43.     });
  44. }

　　4、差不多就这么多，线状图和柱状图都类似，下面是完成代码

html

  1. @{
  2.     ViewBag.Title = "StatisticalChart";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5.  
  6. @Styles.Render("~/Content/openlayers")
  7.  
  8. <div id="map" class="map">
  9.  
  10. </div>
  11. <div class="tool">
  12.     <button id="addPieChart">添加饼图</button>
  13.     <button id="addLineChart">添加线状图</button>
  14.     <button id="addColumnChart">添加柱状图</button>
  15. </div>
  16. <div style="display: none;" id="chart">
  17. </div>
  18.  
  19. @Scripts.Render("~/bundles/openlayers")
  20. <script src="~/Scripts/openlayers/MapStatisticalChart.js"></script>
  21. <script src="~/Scripts/Highcharts/highcharts.js"></script>
  22. <script type="text/javascript">
  23.  
  24.     $(document).ready(function () {
  25.         init();
  26.     });
  27.  
  28. </script>

　　js

  1. /*
  2.  *地图上显示统计图
  3.  */
  4.  
  5. //地图渲染的两个对象
  6. var vector;
  7. var sourceMeasure;
  8.  
  9. //x,y表示渲染的位置，如果是点图层好说，如果是面或者线，需要获取中心点
  10. var overlayId = [];
  11. var dataPie = [{
  12.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  13.         {
  14.             name: '男',
  15.             y: 40.0,
  16.             color: "#5ab1ef"
  17.         }, {
  18.             name: '女',
  19.             y: 60.0,
  20.             color: "#d87a80"
  21.         }
  22.     ]
  23. },
  24. {
  25.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  26.         {
  27.             name: '男',
  28.             y: 45.0,
  29.             color: "#5ab1ef"
  30.         }, {
  31.             name: '女',
  32.             y: 55.0,
  33.             color: "#d87a80"
  34.         }
  35.     ]
  36. },
  37. {
  38.     name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
  39.         {
  40.             name: '男',
  41.             y: 35.0,
  42.             color: "#5ab1ef"
  43.         }, {
  44.             name: '女',
  45.             y: 65.0,
  46.             color: "#d87a80"
  47.         }
  48.     ]
  49. },
  50. {
  51.     name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
  52.         {
  53.             name: '男',
  54.             y: 44.0,
  55.             color: "#5ab1ef"
  56.         }, {
  57.             name: '女',
  58.             y: 56.0,
  59.             color: "#d87a80"
  60.         }
  61.     ]
  62. }];
  63. var map;
  64. function init() {
  65.     sourceMeasure = new ol.source.Vector({ wrapX: false });
  66.  
  67.     vector = new ol.layer.Vector({
  68.         source: sourceMeasure,
  69.         style: new ol.style.Style({
  70.             fill: new ol.style.Fill({
  71.                 color: 'rgba(255, 255, 0, 0.2)'
  72.             }),
  73.             stroke: new ol.style.Stroke({
  74.                 color: '#ffcc33',
  75.                 width: 2
  76.             }),
  77.             image: new ol.style.Circle({
  78.                 radius: 7,
  79.                 fill: new ol.style.Fill({
  80.                     color: '#ffaa33'
  81.                 })
  82.             })
  83.         })
  84.     });
  85.  
  86.     map = new ol.Map({
  87.         controls: ol.control.defaults({
  88.             attribution: false
  89.         }),
  90.         target: 'map',
  91.         layers: [
  92.             new ol.layer.Tile({
  93.                 source: new ol.source.OSM()
  94.             }),
  95.             vector
  96.         ],
  97.         view: new ol.View({
  98.             projection: 'EPSG:3857',
  99.             center: ol.proj.transform([121, 37], 'EPSG:4326', 'EPSG:3857'),
  100.             //center: [121, 37],
  101.             zoom: 6
  102.         })
  103.     });
  104.  
  105.     DrawPoint();
  106.  
  107.     $("#addPieChart").on("click", function () {
  108.         clearChartOverlay();
  109.         for (var i = 0; i < dataPie.length; i++) {
  110.             var d = dataPie[i];
  111.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  112.             var domid = "chart" + guid();
  113.             $("#chart").append("<div id='" + domid + "'></div>");
  114.  
  115.             addPieChart(domid, d, 100);
  116.  
  117.             var chart = new ol.Overlay({
  118.                 id: domid,
  119.                 element: document.getElementById(domid),
  120.                 positioning: "bottom-center",
  121.                 offset: [0, 18],
  122.                 stopEvent: false  //overlay也支持滚珠放大缩小
  123.             });
  124.             map.addOverlay(chart);
  125.  
  126.             var element = chart.getElement();
  127.             chart.setPosition(pt);
  128.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  129.             $(element).popover({
  130.                 placement: 'top',
  131.                 animation: false
  132.             });
  133.             $(element).popover('show');
  134.  
  135.             overlayId.push(domid);
  136.         }
  137.     });
  138.  
  139.     $("#addLineChart").on("click", function () {
  140.         clearChartOverlay();
  141.         for (var i = 0; i < dataLine.length; i++) {
  142.             var d = dataLine[i];
  143.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  144.             var domid = "chart" + guid();
  145.             //$("#chart").append("<div id='" + domid + "'></div>");
  146.             //var chart = new ol.Overlay({
  147.             //    id: domid,
  148.             //    position: pt,
  149.             //    positioning: "bottom-center",
  150.             //    element: document.getElementById(domid),
  151.             //    stopEvent: false  //overlay也支持滚珠放大缩小
  152.             //});
  153.             //map.addOverlay(chart);
  154.             //addLineChart(domid, d.data, 200, 150);
  155.             //overlayId.push(domid);
  156.  
  157.             $("#chart").append("<div id='" + domid + "'></div>");
  158.             var chart = new ol.Overlay({
  159.                 id: domid,
  160.                 positioning: "bottom-center",
  161.                 element: document.getElementById(domid),
  162.                 stopEvent: false  //overlay也支持滚珠放大缩小
  163.             });
  164.             map.addOverlay(chart);
  165.             addLineChart(domid, d.data, 200, 150);
  166.  
  167.             var element = chart.getElement();
  168.             chart.setPosition(pt);
  169.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  170.             $(element).popover({
  171.                 placement: 'top',
  172.                 animation: false
  173.             });
  174.             $(element).popover('show');
  175.  
  176.             overlayId.push(domid);
  177.         }
  178.     });
  179.  
  180.     $("#addColumnChart").on("click", function () {
  181.         clearChartOverlay();
  182.         for (var i = 0; i < dataColumn.length; i++) {
  183.             var d = dataColumn[i];
  184.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  185.             var domid = "chart" + guid();
  186.             $("#chart").append("<div id='" + domid + "'></div>");
  187.             var chart = new ol.Overlay({
  188.                 id: domid,
  189.                 positioning: "bottom-center",
  190.                 element: document.getElementById(domid),
  191.                 offset: [0, 5],
  192.                 stopEvent: false  //overlay也支持滚珠放大缩小
  193.             });
  194.             map.addOverlay(chart);
  195.             addColumnChart(domid, d.data, 80, 80);
  196.  
  197.             var element = chart.getElement();
  198.             chart.setPosition(pt);
  199.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  200.             $(element).popover({
  201.                 placement: 'top',
  202.                 animation: false
  203.             });
  204.             $(element).popover('show');
  205.  
  206.             overlayId.push(domid);
  207.         }
  208.     });
  209. }
  210. /**
  211.  * 移除统计图所使用的Overlay
  212.  * */
  213. function clearChartOverlay() {
  214.     for (var i = 0; i < overlayId.length; i++) {
  215.         map.removeOverlay(map.getOverlayById(overlayId[i]));
  216.     }
  217. }
  218.  
  219. function addPieChart(domid, data, size) {
  220.     $('#' + domid).highcharts({
  221.         chart: {
  222.             backgroundColor: 'rgba(255, 255, 255, 0)',
  223.             plotBorderColor: null,
  224.             plotBackgroundColor: null,
  225.             plotBackgroundImage: null,
  226.             plotBorderWidth: null,
  227.             plotShadow: false,
  228.             width: size,
  229.             height: size
  230.         },
  231.         tooltip: {
  232.             pointFormat: '<b>{point.percentage:.1f}%</b>'
  233.         },
  234.         credits: {
  235.             enabled: false
  236.         },
  237.         title: {
  238.             text: ''
  239.         },
  240.         plotOptions: {
  241.             pie: {
  242.                 dataLabels: {
  243.                     enabled: false
  244.                 }
  245.             }
  246.         },
  247.         series: [{
  248.             type: 'pie',
  249.             name: data.name,
  250.             data: data.data
  251.         }]
  252.     });
  253. }
  254.  
  255. var dataLine = [{
  256.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  257.         {
  258.             name: '安装，实施人员',
  259.             series: [
  260.                 { x: 2010, y: 1234 },
  261.                 { x: 2011, y: 1234 }
  262.             ],
  263.             color: "#5ab1ef"
  264.         }, {
  265.             name: '工人',
  266.             series: [
  267.                 { x: 2010, y: 245 },
  268.                 { x: 2011, y: 3454 }
  269.             ],
  270.             color: "#d87a80"
  271.         }
  272.     ]
  273. },
  274. {
  275.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  276.         {
  277.             name: '安装，实施人员',
  278.             series: [
  279.                 { x: 2010, y: 1234 },
  280.                 { x: 2011, y: 124 },
  281.                 { x: 2012, y: 0 }
  282.             ],
  283.             color: "#5ab1ef"
  284.         }, {
  285.             name: '工人',
  286.             series: [
  287.                 { x: 2010, y: 245 },
  288.                 { x: 2011, y: 0 },
  289.                 { x: 2012, y: 3454 }
  290.             ],
  291.             color: "#d87a80"
  292.         }
  293.     ]
  294. }];
  295.  
  296. function addLineChart(domid, data, width, height) {
  297.  
  298.     var categoriesX = [];
  299.     var seriesValue = [];
  300.     for (var i = 0; i < data.length; i++) {
  301.         var value = [];
  302.         for (var j = 0; j < data[i].series.length; j++) {
  303.             categoriesX.push(data[i].series[j].x);
  304.             value.push(data[i].series[j].y);
  305.         }
  306.  
  307.         seriesValue.push({ "name": data[i].name, "data": value });
  308.     }
  309.  
  310.     $('#' + domid).highcharts({
  311.         chart: {
  312.             backgroundColor: 'rgba(255, 255, 255, 0.8)',
  313.             borderRadius: 20,
  314.             plotBorderColor: null,
  315.             plotBackgroundColor: null,
  316.             plotBackgroundImage: null,
  317.             plotBorderWidth: null,
  318.             plotShadow: false,
  319.             width: width,
  320.             height: height
  321.         },
  322.         credits: {
  323.             enabled: false
  324.         },
  325.         title: {
  326.             text: ''
  327.         },
  328.         yAxis: {
  329.             visible: false,
  330.             title: {
  331.                 text: ''
  332.             }
  333.         },
  334.         xAxis: {
  335.             categories: categoriesX,
  336.             crosshair: true
  337.         },
  338.         legend: {
  339.             enabled: false
  340.         },
  341.         plotOptions: {
  342.             series: {
  343.                 label: {
  344.                     connectorAllowed: false
  345.                 }
  346.             },
  347.             line: {
  348.                 dataLabels: {
  349.                     enabled: true,
  350.                     formatter: function () {
  351.                         return '<b>' + this.point.y + '</b><br>';
  352.                     }
  353.                 }
  354.             }
  355.         },
  356.         series: seriesValue,
  357.         responsive: {
  358.             rules: [{
  359.                 condition: {
  360.                     maxWidth: 500
  361.                 },
  362.                 chartOptions: {
  363.                     legend: {
  364.                         layout: 'horizontal',
  365.                         align: 'center',
  366.                         verticalAlign: 'bottom'
  367.                     }
  368.                 }
  369.             }]
  370.         }
  371.     });
  372. }
  373.  
  374. var dataColumn = [{
  375.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  376.         {
  377.             name: '安装，实施人员',
  378.             series: [
  379.                 { x: 2011, y: 1234 }
  380.             ],
  381.             color: "#5ab1ef"
  382.         }, {
  383.             name: '工人',
  384.             series: [
  385.                 { x: 2011, y: 3454 }
  386.             ],
  387.             color: "#d87a80"
  388.         }
  389.     ]
  390. },
  391. {
  392.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  393.         {
  394.             name: '安装，实施人员',
  395.             series: [
  396.                 { x: 2012, y: 123 }
  397.             ],
  398.             color: "#5ab1ef"
  399.         }, {
  400.             name: '工人',
  401.             series: [
  402.                 { x: 2012, y: 3454 }
  403.             ],
  404.             color: "#d87a80"
  405.         }
  406.     ]
  407. }, {
  408.     name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
  409.         {
  410.             name: '安装，实施人员',
  411.             series: [
  412.                 { x: 2014, y: 252 }
  413.             ],
  414.             color: "#5ab1ef"
  415.         }, {
  416.             name: '工人',
  417.             series: [
  418.                 { x: 2014, y: 324 }
  419.             ],
  420.             color: "#d87a80"
  421.         }
  422.     ]
  423. },
  424. {
  425.     name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
  426.         {
  427.             name: '安装，实施人员',
  428.             series: [
  429.                 { x: 2013, y: 2341 }
  430.             ],
  431.             color: "#5ab1ef"
  432.         }, {
  433.             name: '工人',
  434.             series: [
  435.                 { x: 2013, y: 2341 }
  436.             ],
  437.             color: "#d87a80"
  438.         }
  439.     ]
  440. }];
  441.  
  442. function addColumnChart(domid, data, width, height) {
  443.  
  444.     var categoriesX = [];
  445.     var seriesValue = [];
  446.     for (var i = 0; i < data.length; i++) {
  447.         var value = [];
  448.         for (var j = 0; j < data[i].series.length; j++) {
  449.             categoriesX.push(data[i].series[j].x);
  450.             value.push(data[i].series[j].y);
  451.         }
  452.  
  453.         seriesValue.push({ "name": data[i].name, "data": value });
  454.     }
  455.  
  456.     $('#' + domid).highcharts({
  457.         chart: {
  458.             backgroundColor: 'rgba(255, 255, 255, 0)',
  459.             borderRadius: 20,
  460.             plotBorderColor: null,
  461.             plotBackgroundColor: null,
  462.             plotBackgroundImage: null,
  463.             plotBorderWidth: null,
  464.             plotShadow: false,
  465.             width: width,
  466.             height: height,
  467.             type: 'column'
  468.         },
  469.         credits: {
  470.             enabled: false
  471.         },
  472.         title: {
  473.             text: ''
  474.         },
  475.         yAxis: {
  476.             visible: false,
  477.             title: {
  478.                 text: ''
  479.             }
  480.         },
  481.         xAxis: {
  482.             visible: false,
  483.             categories: categoriesX,
  484.             crosshair: true
  485.         },
  486.         legend: {
  487.             enabled: false
  488.         },
  489.         plotOptions: {
  490.             series: {
  491.                 label: {
  492.                     connectorAllowed: false
  493.                 }
  494.             },
  495.             line: {
  496.                 dataLabels: {
  497.                     enabled: true,
  498.                     formatter: function () {
  499.                         return '<b>' + this.point.y + '</b><br>';
  500.                     }
  501.                 }
  502.             }
  503.         },
  504.         series: seriesValue,
  505.         responsive: {
  506.             rules: [{
  507.                 condition: {
  508.                     maxWidth: 500
  509.                 },
  510.                 chartOptions: {
  511.                     legend: {
  512.                         layout: 'horizontal',
  513.                         align: 'center',
  514.                         verticalAlign: 'bottom'
  515.                     }
  516.                 }
  517.             }]
  518.         }
  519.     });
  520. }
  521.  
  522. function DrawPoint() {
  523.     for (var i = 0; i < dataPie.length; i++) {
  524.         var d = dataPie[i];
  525.         var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  526.  
  527.         var point = new ol.geom.Point(pt);
  528.  
  529.         var feature = new ol.Feature(point);
  530.  
  531.         sourceMeasure.addFeature(feature);
  532.     }
  533. }

　　引用的资料包括：https://blog.csdn.net/gisshixisheng/article/details/50926948，https://blog.csdn.net/henrystern/article/details/81149015

OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题的更多相关文章

  1. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  2. [Xcode 实际操作]四、常用控件-(17)为MKMapView地图上显示提示框

    目录:[Swift]Xcode实际操作 本文将演示当点击地图上的标注圆点时,弹出信息窗口. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  3. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

  4. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  5. 根据百度地图API得到坐标和地址并在地图上显示

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  6. 地图上显示X,Y 坐标代码

    事件数据 所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据,通过这两个参数可以获取相关事件数据,使用GetPosition方法或者Source.H ...

  7. hightmaps 按地图上显示的统计数据

    离extjs 至 easyui 到html5到hightchars 再到hightmaps.Exjts和easyui很相似,extjs是重量级的,easyui轻量级的.比extjs容易上手.照着dem ...

  8. 地图上显示div点位

    功能核心:  地理坐标转屏幕坐标 用到的插件:jquery  animo动画插件 核心代码: var point = new Point(lon, lat, map.spatialReference) ...

  9. 地图上显示点在点上标注当前点的id

    HTML: <div class="form-group field-company-state"> <div style="width:1000px; ...

随机推荐

  1. 运行php网站需要安装什么

    php的运行环境: 为了能够运行php,有以下两种方法: 1. 使用支持php和MySQL的web主机(): 2. 本机(自己电脑)安装web服务器,然后安装MySQL和php. web虚拟主机: 大 ...

  2. VS IIS 注册 以及IIS浏览提示无权限访问

    VS2008 IIS重新注册2008-11-21 9:06无法显示XML页--名称以无效字符开头2008-10-17 15:19无法显示XML页--名称以无效字符开头.iis处理资源时出错的解决办法2 ...

  3. MongoDB安装（一）

    详细图解,记录 win7 64 安装mongo数据库的过程.安装的版本是 MongoDB-win32-x86_64-2008plus-ssl-3.4.1-signed. 示例版本:mongodb-wi ...

  4. Golang之redis

    redis是个开源的高性能的key-value的内存数据库,可以把它当成远程的数据结构. 支持的value类型非常多,比如string.list(链表).set(集合). hash表等等 redis性 ...

  5. layui学习<一>

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. C&C++内存布局

    1. Memory Layout of a C Program http://codingfreak.blogspot.com/2012/03/memory-layout-of-c-program-p ...

  7. php调java接口

    1.下载二进制的 JavaBridge.jar包.java/Java.inc库文件,下载地址:http://php-java-bridge.sourceforge.net/pjb/download.p ...

  8. CocoStudio

    不知道从哪里下载的CocoStudio_Full_V1.0.0.1.1185392965.exe 安装后点击"Animation Editor"."UI Editor&q ...

  9. msys2 设置home路径为windows用户路径

    1配置/etc/nsswitch.conf db_home: windows 2(可不配)增加windows环境变量HOME为%USERPROFILE% 3(可不配)ssh默认仍使用msys中的hom ...

  10. Kubernetes web界面kubernetes-dashboard安装

    本文讲述的是如何部署K8s的web UI,前提是已经有一个k8s集群后,按照如下步骤进行即可.(如下步骤都是在master节点上进行操作) 1.下载kubernetes-dashboard.yaml文 ...