uniapp开发APP怎么引入天地图并使用

Question

uniapp开发APP怎么引入天地图并使用？貌似天地图只能使用在浏览器环境中

Answer 1

是的，天地图是一种基于Web GIS技术的地图服务，通常只能在浏览器环境中使用。

在uniapp中使用天地图的方法主要有两种：

利用Webview组件在APP中展示网页地图
在uniapp中可以使用Webview组件在APP中展示网页地图。具体实现方法是：在uniapp项目中创建一个html文件，然后在该html文件中引入天地图的javascript API，然后在uniapp页面中使用Webview组件加载该html文件。

2.使用第三方库可以使用第三方库解决该问题，例如 Vue-map,leaflet-map, Mapbox-gl-js等库，这些库可以在手机端中使用。

如果你要使用 Vue-map库，那么你需要先安装它，命令如下

npm install vue-map --save

然后在你的页面文件中引入它

import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      zoom: 13,
      center: [39.92, 116.46],
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: [39.92, 116.46]
    };
  }
};

然后在你的模板中使用它

<template>
  <l-map :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="marker"></l-marker>
  </l-map

你需要注册自己的key，然后使用这个key替换上面代码中的url

之后你就可以在uniapp中使用vue-map库显示天地图了