<template>
<view
style="text-align: center"
:style="{ 'padding-top': statusHeight + 'px' }"
>
<!-- <view @click="getRegeo">获取当前定位...</view>
<view>地址:{{ addressName }}</view> -->
<!--web-viwe的位置-->
<!-- <web-view :src="url"></web-view> -->
<view
id="map"
style="width: 100%; height: 500px"
:style="{ 'padding-top': contHeight + 'px' }"
></view>
</view>
</template>
<script>
// import { mixins } from "@/mixins/mixin.js";
import amap from "@/js/commonJs/amap-wx.js"; //引入高德微信小程序版sdk
export default {
// mixins: [mixins],
data() {
return {
statusHeight: this.statusBar || 10,
amapPlugin: null,
key: "6c26c36ef3cbd15bbbc79f0fd3e1068a",
addressName: "",
url: "/hybrid/html/map.html",
timer: null,
contHeight: 100,
};
},
onLoad() {
let _this = this;
uni.getSystemInfo({
success: function (e) {
let height = e.windowHeight;
_this.contHeight = height;
},
});
if (!this.$Local.getItem("login")) {
this.$Common.user.showToast("请重新登录");
this.$Common.user.linkPageRedirectTo("/pages/login/login");
}
this.amapPlugin = new amap.AMapWX({
key: this.key,
});
// this.timer = setInterval(() => {
this.getRegeo();
// }, 5000);
// this.url = "/hybrid/html/map.html?height=" + this.statusBar;
},
methods: {
getRegeo() {
const _this = this;
// uni.showLoading({
// title: "获取信息中",
// });
_this.amapPlugin.getRegeo({
success: (data) => {
console.log(data);
let obj = {
latitude: data[0].latitude,
longitude: data[0].longitude,
};
console.log(obj);
let arr = [];
if (this.$Local.getItem("lnglat")) {
arr = JSON.parse(this.$Local.getItem("lnglat"));
}
arr.push(obj);
// this.$Local.clear();
this.$Local.setItem("lnglat", JSON.stringify(arr));
console.log(arr);
_this.addressName = data[0].name;
},
file: (err) => {
console.log(err);
},
});
},
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
<script module="test" lang="renderjs" >
import L from '@/js/commonJs/leaflet.js'
// import '@/supermap/iclient-leaflet';
// import '@supermap/iclient-leaflet';
let map = null;
export default{
mounted() {
// console.log(window.L)
// // 存放marker
let markers = [];
map = L.map("map", {
// center: [40.02404009136253, 116.50641060224784], // 地图中心
center:[40.129,117.1953],
zoom: 14, //缩放比列
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false // 移除右下角leaflet标识
});
let layer = L.tileLayer(
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
).addTo(map);
let div = '<div class="circle-marker"></div>'
let divIcon = L.divIcon({
html: div,
iconSize: [10, 10],
className: 'circle-marker'
})
map.on('click', function (e) {
const { lat, lng } = e.latlng;
console.log(lat,lng)
// console.log(lng)
let marker = L.marker([lat, lng], { icon: divIcon }).addTo(map);
markers.push(marker)
})
// 10.72/40.129/117.1953
// let layer = L.tileLayer('https://api.mapbox.com/styles/v1/jc1220/ckqao4x9l084318nxphf9geta.html?fresh=true&title=view&access_token=pk.eyJ1IjoiamMxMjIwIiwiYSI6ImNrcWFueG93dDA2cXYydnFobDVvN2NvZjEifQ.nwvHPf8iAtcB6ip6uvzhMw').addTo(map)
// map.removeLayer(layer) // 移除图层
}
}
</script>
<style>
@import url("https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css");
.circle-marker {
width: 10px;
height: 10px;
border-radius: 50%;
background: #5F69F9;
}
</style>
uniapp(App)+leaflet
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 项目源代码地址:https://github.com/Mstian/wanAndroid (求个star)项目简书...
- 1.背景介绍 什么是HBuilder? HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web...
- 下载最新的离线sdk:http://ask.dcloud.net.cn/docs/#//ask.dcloud.ne...