更新移动端地图缩放

code/src/components/maps/index.vue

@@ -1,33 +1,15 @@
 <template>
   <div>
-    <svg
-      id="map"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 1920 1000"
-      style="enable-background: new 0 0 1920 1000"
-      xml:space="preserve"
-    >
+    <svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+      y="0px" viewBox="0 0 1920 1000" style="enable-background: new 0 0 1920 1000" xml:space="preserve">
       <font horiz-adv-x="1000">
         <!-- Copyright 2014 Adobe Systems Incorporated. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. -->
-        <font-face
-          font-family="SourceHanSansCN-Bold-GBpc-EUC-H"
-          units-per-em="1000"
-          underline-position="-150"
-          underline-thickness="50"
-        />
-        <missing-glyph
-          horiz-adv-x="1000"
-          d="M100,-120l800,0l0,1000l-800,0M500,421l-318,409l636,0M532,380l318,409l0,-818M182,-70l318,409l318,-409M150,789l318,-409l-318,-409z"
-        />
-        <glyph
-          unicode="4"
-          horiz-adv-x="589"
-          d="M164,304l115,184C300,528 320,569 338,608l4,0C340,565 336,498 336,455l0,-151M561,304l-88,0l0,436l-176,0l-276,-448l0,-100l315,0l0,-192l137,0l0,192l88,0z"
-        />
+        <font-face font-family="SourceHanSansCN-Bold-GBpc-EUC-H" units-per-em="1000" underline-position="-150"
+          underline-thickness="50" />
+        <missing-glyph horiz-adv-x="1000"
+          d="M100,-120l800,0l0,1000l-800,0M500,421l-318,409l636,0M532,380l318,409l0,-818M182,-70l318,409l318,-409M150,789l318,-409l-318,-409z" />
+        <glyph unicode="4" horiz-adv-x="589"
+          d="M164,304l115,184C300,528 320,569 338,608l4,0C340,565 336,498 336,455l0,-151M561,304l-88,0l0,436l-176,0l-276,-448l0,-100l315,0l0,-192l137,0l0,192l88,0z" />
       </font>
 
       <vmap />
@@ -74,7 +56,7 @@ const mapNumChane = async (type) => {
       rowid: item.id,
     };
   });
-  
+
 
   map.forEach((item) => {
     if (item.sum == 0) {
@@ -225,31 +207,31 @@ onMounted(() => {
       ],
       init: function (options) {
         var instance = options.instance,
+          initialScale = 1,
           pannedX = 0,
           pannedY = 0;
-        instance.zoom(4.3);
-        instance.pan({ x: -450, y: 0 });
 
+          instance.zoom(1.3);
+          instance.pan({ x: 0, y: 200 })
+      
         // Init Hammer
         // Listen only for pointer and touch events
-        hammer.value = window.Hammer(options.svgElement, {
+        this.hammer = window.Hammer(options.svgElement, {
           inputClass: window.Hammer.SUPPORT_POINTER_EVENTS
             ? window.Hammer.PointerEventInput
             : window.Hammer.TouchInput,
         });
 
         // Enable pinch
-        hammer.value.get("pinch").set({ enable: true });
+        this.hammer.get("pinch").set({ enable: true });
 
         // Handle double tap
-        hammer.value.on("doubletap", function () {
-          console.log('-------sss------1');
-          return
-          // instance.zoomIn();
+        this.hammer.on("doubletap", function () {
+          instance.zoomIn();
         });
 
         // Handle pan
-        hammer.value.on("panstart panmove", function (ev) {
+        this.hammer.on("panstart panmove", function (ev) {
           // On pan start reset panned variables
           if (ev.type === "panstart") {
             pannedX = 0;
@@ -263,8 +245,7 @@ onMounted(() => {
         });
 
         // Handle pinch
-        hammer.value.on("pinchstart pinchmove", function (ev) {
-          console.log('-------------2');
+        this.hammer.on("pinchstart pinchmove", function (ev) {
           // On pinch start remember initial zoom
           if (ev.type === "pinchstart") {
             initialScale = instance.getZoom();
@@ -282,22 +263,24 @@ onMounted(() => {
 
         // Prevent moving the page on some devices when panning over SVG
         options.svgElement.addEventListener("touchmove", function (e) {
-          console.log('-------------3');
           e.preventDefault();
         });
       },
 
       destroy: function () {
-        hammer.value.destroy();
+        this.hammer.destroy();
       },
     };
 
     // Expose to window namespace for testing purposes
     window.panZoom = window.svgPanZoom("#map", {
       zoomEnabled: true,
-      controlIconsEnabled: false,
+      controlIconsEnabled: true,
       fit: 1,
       center: 1,
+      maxZoom: 5,
+      minZoom: 0.5,
+      zoomFactor: 0.01,
       // 禁止双击放大
       dblClickZoomEnabled:false,
       customEventsHandler: eventsHandler,