VUE+js高德地图2.0API两幅地图联动同步缩放

2023-11-19

<template>
  <div>
    <br>
    <div id="container"></div>
<!--    <div class="info">-->
<!--      <h4 id="text"></h4>-->
<!--      <p>当前级别:<span id="map-zoom">15</span></p>-->
<!--    </div>-->
    <div id="map" class="s1">实时地图
    </div>
    <div id="map2" class="s2">实时地图2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: {},
      map2: {
        setZoomAndCenter(number, numbers) {
        }
      },
      zoom1: [],
      zoom2: [],
      logMapinfo: {},
      currentCenter1: [],
      currentCenter2: []

    }
  },
  mounted() {
    this.initAMap()
    this.initAMap2()
    console.log('00000000000000000', this.map.getZoom())
    console.log('1111111111', this.map.getCenter().toString())
    // this.map.on('zoomstart', this.mapZoomstart)
    // this.map.on('zoomchange', this.mapZoom)
    this.map.on('zoomend', this.mapZoomend)
    this.map.on('complete', this.mapCompleted)

    // this.map2.on('zoomstart', this.mapZoomstart2)
    // this.map2.on('zoomchange', this.mapZoom2)
    this.map2.on('zoomend', this.mapZoomend2)
    this.map2.on('complete', this.mapCompleted2)
  },
  created() {
    console.log('8777777777777')
  },
  methods: {
    initAMap() {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        // mapStyle: 'amap://styles/fresh',
        // zoom: this.mapData.zoom,//级别范围
        zoom: 14, // 级别范围
        center: [114.411943, 30.527378],
        // center: [113.201943, 23.158378],//地图中心点
        // center: this.center,
        // 隐藏默认楼块
        features: ['bg', 'road', 'point'],
        mapStyle: 'amap://styles/light',
        layers: [
          // 高德默认标准图层
          new AMap.TileLayer.Satellite(),
          new AMap.TileLayer.RoadNet(),
          // 楼块图层
          new AMap.Buildings({
            zooms: [16, 20],
            zIndex: 2,
            heightFactor: 2
          })
        ]
      })
    },
    initAMap2() {
      this.map2 = new AMap.Map('map2', {
        resizeEnable: true,
        // mapStyle: 'amap://styles/fresh',
        // zoom: this.mapData.zoom,//级别范围
        zoom: 14, // 级别范围
        center: [114.411943, 30.527378]
        // center: [113.201943, 23.158378],//地图中心点
        // center: this.center,
      })
    },
    mapZoomstart() {
      console.log('层级', this.map.getZoom())
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
      // this.map2.setZoomAndCenter(this.map.getZoom(), [120, 30])
    },
    mapZoom() {
      console.log('层级', 7777777777777777777777)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
    },
    mapZoomend() {
      console.log('层级', 8888888888888888888888)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
    },
    mapCompleted() {
      console.log('层级', 999)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
      // map.setCenter([lng, lat]);
    },
    mapZoomstart2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapZoom2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapZoomend2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapCompleted2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    }
  }

}

</script>
<style scoped>
  #map {
    /*top: 22px;*/
    margin: 5px;
    padding: 10px;
    width: 50%;
    height: 900px;
    /*width: 220px;*/
    /*height: 120px;*/
    background-color: #ffffff;
    border: 2px #3e94f9 solid;
    font-size: 14px;
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
  #map2 {
    left: 50%;
    margin: 5px;
    padding: 10px;
    width: 50%;
    height: 900px;
    /*width: 220px;*/
    /*height: 120px;*/
    background-color: #ffffff;
    border: 2px #3e94f9 solid;
    font-size: 14px;
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
  #info{
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE+js高德地图2.0API两幅地图联动同步缩放 的相关文章

  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • Firebase Function 从其他文件导入函数 - javascript

    我正在使用 javascript 构建 firebase 函数 现在我有很多内部调用函数 我计划将这些函数移动到不同的文件中 以避免 index js 变得非常混乱 下面是当前的文件结构 functions index js interna
  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 如何使用引用该键的变量来获取对象键中的值?

    我有一个对象 我可以引用密钥a如下 var obj a A b B c C console log obj a return string A 我想通过使用变量引用对象键来获取值 如下所示 var name a console log ob
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p

随机推荐