一：注册天地图
进去注册账号，然后：
点击创建新应用
这里可以先选浏览器端测试。
然后就会给出你的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万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
