赞
踩
最好是使用webview + html形式加载,避免打包app时的地图加载问题
使用webview必须按照官方文档,官网地址:https://uniapp.dcloud.net.cn/component/web-view.html
<template> <view> <!--src是html的地址,若需传值,使用以下方式--> <web-view class="webview" id="webview" :src="urlc"></web-view> </view> </template> <script> export default { onLoad(options) { //从其他组件传来的值 this.lat = options.lat this.longt = options.longt }, data() { return { lat:0, longt:0 } }, computed: { urlc:function() { return '/hybrid/html/index.html?lat='+this.lat+"&longt="+this.longt } }, } </script> <style> </style>
对应的html一定需要注意目录结构。
<!DOCTYPE html>
<html>
<head>
<title>位置</title>
<!--leaflet开发交互地图-->
<link rel="stylesheet" href="../leaflet/leaflet.css" />
<script src="../leaflet/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
</body>
// 对应的js <script> var map = L.map('map').setView([坐标], 13); //若其他组件给当前html文件传值,比如:坐标信息等 //取url中的参数值 function getQuery(name) { // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在) let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if(r != null) { // 对参数值进行解码并取出对应的值 return decodeURIComponent(r[2]); } return null; } var lat = getQuery('lat') var longt = getQuery('longt') //地图定位 var map = L.map('map').setView([lat,longt], 16); L.tileLayer('http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=key值', { zoomControl: true, attributionControl: false }).addTo(map) L.tileLayer('http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=key值', { zoomControl: true, attributionControl: false }).addTo(map) //添加标记点 var marker = L.marker([lat,longt]) map.addLayer(marker) </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。