高德地图离线版 使用高德地图api的方法

高德离线包我已经存至Gitee(自行下载即可):高德地图离线解决方案: 高德地图离线解决方案

然因为高德地图的瓦片地图太大,所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以

  initMap () {
      const base_url = "/"
      const layers = [new AMap.TileLayer({
        getTileUrl: function (x, y, z) {
          // return `${base_url}imgMap/${z}/${x}/${y}.png`
          return `http://192.168.0.105:29001/images/imgMap/${z}/${x}/${y}.png`
        },
        opacity: 1,
        zIndex: 99,
      })]
      this.map = new AMap.Map('container', { // 设置地图容器id
        resizeEnable: true,
        zoom: 15,
        zooms: [15, 20], //设置缩放级别范围 3-20 级
        // 前面是缩小 后面是放大
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        center: [114.057201, 22.538136],
        defaultCursor: 'pointer',
        showLabel: true,  //是否显示文字标注
        layers: layers,
        Plugins:["AMap.PolygonEditor"]
      })

    },

然后使用他的离线方法

  ceju () {
      this.ruler1 = new AMap.MouseTool(this.map)
      this.ruler1.rule({
        startMarkerOptions: {//可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31),//图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        endMarkerOptions: {//可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31),//图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        midMarkerOptions: {//可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31),//图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        lineOptions: {//可缺省
          strokeStyle: "solid",
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 2
        }
      })
    },

这个时候会报错 因为没有这个方法

解决方法

这个代码把你想用的方法名保存到本地

找到对应的名字 复制

然后就可以正常使用这个方法拉

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高德地图API离线使用的步骤如下: 1. 下载并安装离线地图开发环境,可以从官方网站或其他可靠来源获取。启动软件后,根据提示进行操作。 2. 在有网络连接的情况下,点击进入离线地图开发环境。如果没有网络连接,则插上离线地图加密锁后点击进入。 3. 在离线地图开发环境中,可以进行以下操作: - 添加离线地图:在没有网络的情况下,先将地图下载到本地。 - 添加本地数据:将自己的本地数据添加到地图上,并展示在地图上。 - 预设地图和管理地图:预设地图是系统默认提供的地图,管理地图是用户自己建立的离线地图。 - 管理数据:用户上传的本地数据,用于在地图上展示。 - 技术支持:如果有任何问题,可以点击相关链接或拨打电话进行咨询。 4. 在离线地图开发环境中,选择开发使用,可以进行以下操作: - 离线地图的开发:支持WEB开发,WMS(WMTS)、TMS和BIGEMAP直接加载离线地图的方式。 - 基于WEB的离线地图开发:加载地图代码HTML。 - 离线地图开发需要用到的本地KEY和地图ID。 - 在二次开发代码中加载地图时,需要使用到KEY和地图ID。 5. 如果需要浏览离线地图,点击浏览按钮即可查看地图。 总结来说,高德地图API离线使用步骤包括下载安装离线地图开发环境、添加离线地图和本地数据、进行开发使用操作等。具体的操作步骤可以参考相关的官方教程和文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [百度(高德、GG歌)离线地图开发环境搭建【离线地图开发源代码】](https://blog.csdn.net/bigemap/article/details/86649040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [高德地图Amap离线地图的使用](https://blog.csdn.net/diyangxia/article/details/105289136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值