UNIAPP移动端免费地图!!(全网唯一详细且免费教程)

一:注册天地图

天地图API (tianditu.gov.cn)

进去注册账号,然后:

点击申请

 

 点击创建新应用

 这里可以先选浏览器端测试。

 然后就会给出你的Key,复制好。

二:使用天地图

在项目下创建:hybrid/html/xxx.html(xxx为你的文件名)

 xxx.html里面的内容放:注意在你的key这里把你的key换上

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
   <script>
        var map;
        var zoom = 12;
        function onLoad() {
			console.log('showMap');
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
			console.log('Done');
        }
    </script>
</head>
 
<body onLoad="onLoad()">
 
	<h2>MAP</h2>
    <div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>
 
</body>
</html>

然后回到你的展示页面 xxx.vue:

<template>
	<view>
		<!-- 本地webview -->
		<web-view :src="src"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				src:'/hybrid/html/map.html'
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

然后保存关闭重新运行一条龙。

三:结果展示

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是使用uniapp和腾讯地图SDK进行导航的示例代码: 1. 在HBuilderX中创建一个uniapp项目。 2. 在项目根目录下的manifest.json文件中添加以下权限: ```json "app-plus": { "modules": { "tencentMap": { "useNative": true } } }, ``` 3. 在HBuilderX中打开插件市场,搜索并安装tencentMap插件。 4. 在需要使用地图导航的页面中引入tencentMap插件: ```javascript import tencentMap from '@/uni_modules/tencentMap/js_sdk/tencentMap'; ``` 5. 在导航按钮的点击事件中添加以下代码: ```javascript let plugin = requirePlugin('tencentMap'); let key = '你的腾讯地图key'; // 请替换为你自己的key let referer = 'uniapp-demo'; // 请替换为你自己的应用名称 let endPoint = JSON.stringify({ // 导航终点 'name': '终点名称', 'latitude': 终点纬度, 'longitude': 终点经度 }); let mode = 'driving'; // 导航模式,可以选取 walking, bicycling, driving let url = 'https://apis.map.qq.com/tools/routeplan/' + '?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&mode=' + mode; uni.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(url) }) ``` 6. 在需要打开webview的页面中创建一个webview组件,用于显示地图导航页面: ```html <template> <view> <web-view :src="url"/> </view> </template> <script> export default { props: ['url'] } </script> ``` 7. 最后,你需要在腾讯地图开放平台上申请一个key,并将其替换为代码中的key。同时,你还需要在应用的开发者中心中设置referer。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值