vue项目实现高德地图截图

最新推荐文章于 2024-03-05 10:34:23 发布

原创

最新推荐文章于 2024-03-05 10:34:23 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

项目背景：

uniapp开发app需用户截取当前地图位置，作为附件上传；奈何uniapp引入高德地图太麻烦，直接使用webview标签嵌套map项目的方式实现。

实现步骤：

1、搭建vue项目过程忽略；

2、根据传参自动计算地图区域大小（毕竟是app，就算是嵌套也得像是那回事）；

3、vue项目引入高德地图

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      html,body{
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://webapi.amap.com/maps?v=2.0&key=你自己的key"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled