经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
百度地图 - 基础学习(2): 地图缩放比例ZOOM的获取和设置
来源:cnblogs  作者:玄戈营第九骑兵队  时间:2021/1/4 10:54:33  对本文有异议

地图缩放比例ZOOM的获取和设置:template

  1. <template>
  2. <el-row class="el-col el-col-24 queryPar-form-wrapper">
  3. <el-form
  4. class="el__form-queryPar"
  5. ref="ruleForm"
  6. label-position="top"
  7. :model="ruleForm"
  8. >
  9. <el-form-item prop="mapZoom">
  10. <el-input
  11. type="text"
  12. placeholder="请输入地图缩放级别,区间为4~19"
  13. v-model.trim="ruleForm.mapZoom"
  14. ></el-input>
  15. </el-form-item>
  16. </el-form>
  17. <el-row class="el-col el-col-24 queryPar-button-wrapper">
  18. <el-button
  19. class="el-button-fun"
  20. @click.stop="setZoom('setZoom', ruleForm.mapZoom)"
  21. >设置级别</el-button
  22. >
  23. <el-button class="el-button-fun" @click.stop="setZoom('amplification')"
  24. >放大一级</el-button
  25. >
  26. </el-row>
  27. <el-row class="el-col el-col-24 queryPar-button-wrapper">
  28. <el-button class="el-button-fun" @click.stop="setZoom('narrow')"
  29. >缩小一级</el-button
  30. >
  31. <el-button class="el-button-fun" @click.stop="getZoom('current')"
  32. >获取当前ZOOM</el-button
  33. >
  34. </el-row>
  35.  
  36. <el-row class="el-col el-col-24 font-size16" v-if="currentZoom">
  37. <label class="color-b2aead">当前地图缩放级别为:</label>
  38. <label class="color-568dfd">{{ currentZoom ? currentZoom : "" }}</label>
  39. </el-row>
  40. </el-row>
  41. </template>

地图缩放比例ZOOM的获取和设置:script

  1. <script>
  2. export default {
  3. name: "mapZoom",
  4. props: {
  5. mapInstance: {
  6. type: Object,
  7. required: true,
  8. default: () => {
  9. return {};
  10. }
  11. }
  12. },
  13. data() {
  14. return {
  15. ruleForm: {
  16. mapZoom: null
  17. },
  18. currentZoom: null
  19. };
  20. },
  21. methods: {
  22. // 设置地图缩放比例Zoom
  23. setZoom(type, zoom) {
  24. let newZoom = 0;
  25. switch (type) {
  26. case "amplification": {
  27. newZoom = this.getZoom() + 1;
  28. break;
  29. }
  30. case "narrow": {
  31. newZoom = this.getZoom() - 1;
  32. break;
  33. }
  34. case "setZoom": {
  35. if (zoom) {
  36. newZoom = Number(zoom);
  37. } else {
  38. return;
  39. }
  40. break;
  41. }
  42. }
  43. this.currentZoom = null;
  44. this.mapInstance.setZoom(newZoom); // 前面地图初始化时已获取map实例,故这里直接通过api设置。
  45. // setZoom方法接受正整数(4~19)或小数(4.0~19.0),虽然接受小数,实际上是取了整的,按整数设置。故最好输入正整数
  46. },
  47. // 获取地图当前缩放比例Zoom
  48. getZoom(type) {
  49. let tempZoom = this.mapInstance.getZoom(); // 前面地图初始化时已获取map实例,故这里直接通过api获取
  50. if (!type) {
  51. return tempZoom;
  52. } else {
  53. this.currentZoom = tempZoom;
  54. }
  55. }
  56. }
  57. };
  58. </script>

 

原文链接:http://www.cnblogs.com/dihong/p/14215463.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号