svg-map-sh

A svg map for shanghai with zoom and autoplay function

install:

npm install  svg-map-sh

start:

import Vue from 'vue';
import svgmap from "svg-sh-map";

Vue.use(map);

new Vue({
  el: '#app',
  render: h => h(App)
});

tag

<svgmap :mapData="data" :width="600" :height="500" :options="map"></svgmap>

props:

width: number,
height: number,
mapData: [
            {
              name: "崇明",
              number: 0
            },
            {
              name: "松江",
              number: 66
            },
            {
              name: "闵行",
              number: 70,
              zoom: true, //zoom or not
              zIndex: 2, // render order, The bigger the number, the higher the hierarchy
            },
            ...
          ],
          
options: {
            //default
            colorGradient: ["#028090", "#f0f3bd"],
            highlight: "#06f092",
            gradWidth: 10,
            barPosition: "",
            zoomScale: 2.2,
            zoomOffest: [0, -77],
            barShow: true,
            barPad: 10,
            barRadius: 5,
            barBackground: "#ccc",
            autoPlay: true,
          }