<template>
<view class="">
<view class="leaflet-map-page">
<view :prop="dataObj" :change:prop="leaflet.drawMarker" id="map" class="map"> </view>
</view>
<button @click="goJ">点击获取经纬度</button>
<p>经度{{latitude}}</p>
<p>纬度{{longitude}}</p>
<p>哈哈{{appAuthorizeSetting}}</p>
</view>
</template>
<script>
import {
openGps
} from '../../common/device.js'
export default {
components: {},
data() {
return {
dataObj: {},
dataList: [],
latitude: '',
longitude: '',
appAuthorizeSetting: ''
}
},
mounted() {
this.dataObj = {
dataList: [],
}
// console.log(navigator.geolocation, 'navigator.geolocation');
},
methods: {
}
}
</script>
<script module="leaflet" lang="renderjs">
// const L = require('@/common/leaflet.min.js');
import '@/common/leaflet.min.css';
import '../../common/leaflet-routing-machine.css'
import '../../common/leaflet.min.js'
import '../../common/leaflet-routing-machine.js'
let map = null;
let layerGroup = null;
var la = null,
lo = null
export default {
data() {
return {
latitude: '',
longitude: '',
appAuthorizeSetting: '',
latlngA: [51.505, -0.09], // 坐标点 A
latlngB: [51.5, -0.1], // 坐标点 B
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.appAuthorizeSetting = systemInfo.platform;
// #ifdef H5
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPosition);
console.log(navigator.geolocation, 'navigator.geolocation2');
} else {
console.log("Geolocation is not supported by this browser.");
}
// #endif
},
onLoad() {
// this.intervalId = setInterval(() => this.goJ(), 1000)
},
onUnload: function() {
clearInterval(this.intervalId); // 在页面卸载前停止定时器，防止内存泄漏
},
methods: {
init(latitude, longitude) {
if (map) {
map.remove(); //初始化新地图的地方前，查看是否已经清除了旧地图实例
}
map = new L.map('map', {
zoomControl: false,
attributionControl: false //去除右小角的leaflet的标志
}).setView([latitude, longitude], 16); //纬度，经度 缩放
L.tileLayer(
// "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0064dec30e2d06d872cf71b4cbb9bbce"
// "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"// 高德地图瓦片
"https://tile-c.openstreetmap.fr/hot/{z}/{x}/{y}.png" //openstreetmap
)
.addTo(map);
L.Routing.control({
waypoints: [
L.latLng(31.4969, 120.31003),
L.latLng(31.52324, 120.226687)
]
}).addTo(map);
L.Routing.Localization['zh'] = {
instructions: {
arrive: '到达',
continue: '继续',
merge: '合并',
roundabout: '环岛',
depart: '启程',
pass: '通过',
interval: '间隔',
next: '下一个',
left: '向左',
right: '向右'
}
};
L.routing.control({
language: 'zh'
}).addTo(map);
L.control.zoom({
position: 'bottomright',
}).addTo(map);
//点击事件
map.on('click', function(e) {
var latlng = e.latlng;
//设置地图坐标
// map.setView(latlng, 7)
//点击添加标记，设置地图坐标
L.marker(latlng, {
icon: markerIcon
}).addTo(map)
})
//监听鼠标点击事件，弹出经纬度
map.on('click', function(e) {
L.popup().setLatLng(e.latlng)
.setContent('经纬度' + e.latlng.toString())
.openOn(map);
console.log("经度" + e.latlng.lat)
console.log("纬度" + e.latlng.lng)
this.latitude = e.latlng.lat.toFixed(5);
this.longitude = e.latlng.lng.toFixed(5);
console.log(this.latitude, this.longitude, 'longitude');
});
var latlng = L.latLng(31.4969, 120.31003);
var jw = latlng.distanceTo(L.latLng(31.52324, 120.226687));
console.log(jw + '米', '两点之间的距离');
//添加静态坐标
var markerIcon = L.icon({
iconUrl: '../../static/tap.png',
iconSize: [30, 30] //高，宽
})
L.marker([latitude, longitude], {
icon: markerIcon
}).addTo(map)
},
showPosition(position) {
this.$nextTick(() => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
let x = this.longitude
let y = this.latitude
let x_pi = (3.14159265358979324 * 3000.0) / 180.0
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
let lngs = z * Math.cos(theta) + 0.0065
let lats = z * Math.sin(theta) + 0.006
this.latitude = lats
this.longitude = lngs
this.$forceUpdate() //强制更新组件。
});
},
goJ() {
let that = this
// that.appAuthorizeSetting = uni.getAppAuthorizeSetting()
// uni.showLoading({
// title: '正在加载中',
// icon: 'none'
// });
uni.getLocation({
type: 'wgs84',
success: function(res) {
// console.log('当前位置的经度：' + res.longitude);
// console.log('当前位置的纬度：' + res.latitude);
that.$nextTick(() => {
that.latitude = res.latitude
that.longitude = res.longitude
let x = that.longitude
let y = that.latitude
let x_pi = (3.14159265358979324 * 3000.0) / 180.0
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
let lngs = z * Math.cos(theta) + 0.0065
let lats = z * Math.sin(theta) + 0.006
that.latitude = lats
that.longitude = lngs
that.$forceUpdate() //强制更新组件。
});
// console.log(that.latitude, that.longitude, '哈哈哈哈', la, lo);
if (la !== that.latitude && lo !== that.longitude) {
// console.log(that.latitude, that.longitude, '啦啦啦啦啦啦');
that.init(that.latitude, that.longitude);
la = that.latitude
lo = that.longitude
} else {
// console.log(9);
}
// that.init(that.latitude, that.longitude);
},
fail: err => {
console.error('获取位置失败：', err);
if (err.errMsg === 'getLocation:fail auth deny') {
uni.showModal({
title: '提示',
content: '您拒绝了位置权限，部分功能将无法使用。请在设置中开启位置权限。',
showCancel: false,
confirmText: '去设置',
success: function(res) {
if (res.confirm) {
uni.openSetting({});
}
}
});
} else {
uni.showToast({
title: err.errMsg,
icon: 'error'
});
}
}
});
},
drawMarker(newValue, oldValue, ownerInstance, instance) {
let {
dataList
} = newValue;
// 此处写想要实现的效果的方式
},
clearMarker() {
if (layerGroup !== null) {
layerGroup.clearLayers();
layerGroup = null;
}
}
}
}
</script>
<style>
#map {
min-width: 603rpx;
min-height: 967rpx;
}
</style>
我使用leaflet地图的插件Leaflet Routing Machine，运用这段代码
L.Routing.Localization['zh'] = {
instructions: {
arrive: '到达',
continue: '继续',
merge: '合并',
roundabout: '环岛',
depart: '启程',
pass: '通过',
interval: '间隔',
next: '下一个',
left: '向左',
right: '向右'
}
};
L.routing.control({
language: 'zh'
}).addTo(map);
想把leaflet原来的英文路径指引改为中文，但是不管用
