uniapp开发APP怎么引入天地图并使用?貌似天地图只能使用在浏览器环境中
是的,天地图是一种基于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: '© <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库显示天地图了