vue 使用 Highmaps 遇到的坑

最新推荐文章于 2020-06-28 14:32:42 发布

努力前进的小泡泡

最新推荐文章于 2020-06-28 14:32:42 发布

阅读量527

点赞数

分类专栏： vue.js 文章标签： vue highmaps

本文链接：https://blog.csdn.net/Zfy_bubble/article/details/102497317

版权

本文介绍了在Vue项目中使用Highmaps创建地图的步骤，包括引入必要的JS库，加载自定义或公开的地图JSON数据。作者在配置过程中遇到了地图无法显示的问题，原因是未正确设置`rank`参数，同时提到了描点时proj4插件可能出现的安装问题，为遇到类似问题的开发者提供了解决方案和联系方式。

摘要由CSDN通过智能技术生成

接到需求在vueadmin里面使用highmaps 创建地图描点内容更新

写地图首先是通过vue需要的一些外部js库

import Highcharts from "../../../node_modules/highcharts/highmaps";
import proj4 from "proj4"; //描点用的
import MapData from "./maps.js";//地图数据json
import Maphoter from "./Maphoter.js"; //描点json

然后准备绘制地图了因为我这个json是公司买来的这里就不暴露了可以直接去下载中国地图
地址https://data.jianshukeji.com/jsonp?filename=geochina/china.json这里可下载然后通过export default 暴露出来就可以了或者直接请求也是可以的这里就不多讲了

这里打开就是我的一些配置遇到地图绘制不出来下面rank没有写这是一个坑，描点的时候注意proj4这个插件可能会安装失败如有问题可联系博主 qq 912164653 需要转载的话请著名谢谢

export default {
   
  name: "vuemap",
  data() {
   
    return {
   
      mapDataList: [
        {
   
          name: "上城区",
          value: 1000,
          rank: 1
        },
        {
   
          name: "下城区",
          value: 2000,
          rank: 2
        },
        {
   
          name: "江干区",
          value: 3000,
          rank: 3
        },
        {
   
          name: "拱墅区",
          value: 4000,
          rank: 4
        },
        {
   
          name: "西湖区",
          value: 5000,
          rank: 5
        },
        {
   
          name: "滨江区",
          value: 6000,
          rank: 6
        },
        {
   
          name: "萧山区",
          value: 7000,
          rank: 7