uniapp地图多边形使用

绝地灬酷狼 2022-12-22 09:52 448阅读 0赞

<template>
    	<view>
    		<map @tap='mapTap' :style="'width: 100%;'+ 'height:'+screenHeight" :latitude="latitude" :longitude="longitude" :polygons="polygons" :markers="markerList">
    		</map>
    	</view>
    </template>
    <script> export default { data() { return { "longitude": 100.789761, "latitude": 22.022137, screenHeight: '600px', markerList: [], polygons: [{ //多边形的坐标数组 points: [{ "longitude": 100.789761, "latitude": 22.022137 }, { "longitude": 100.789833, "latitude": 22.022136 }, { "longitude": 100.790838, "latitude": 22.019582 }, { "longitude": 100.794509, "latitude": 22.020163 }, { "longitude": 100.792928, "latitude": 22.022182 }, { "longitude": 100.789761, "latitude": 22.022137 }], fillColor: "#55888888", //填充颜色 strokeColor: "#22FF00", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }] } }, methods: { mapTap(e) { console.log(JSON.stringify(e)) console.log('当前位置的经度：' + e.detail.longitude); console.log('当前位置的纬度：' + e.detail.latitude); this.markerList.push({ latitude: e.detail.latitude, longitude: e.detail.longitude, iconPath: '../../static/location.png' }); this.markerList = JSON.parse(JSON.stringify(this.markerList)); var poly = [{ points: this.markerList, fillColor: "#55888888", //填充颜色 strokeColor: "#22FF00", //描边颜色 strokeWidth: 2, //描边宽度 zIndex: 1, //层级 }]; this.polygons = poly; } }, onLoad() { // this.screenHeight = uni.getSystemInfoSync().windowHeight; uni.getLocation({ type: 'gcj02', success: res => { // this.latitude = res.latitude; // this.longitude = res.longitude; }, fail: (res) => { console.log('错误：' + JSON.stringify(res)); } }); }, onReady() { } } </script>
    
    <style> </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，448人围观）

还没有评论，来说两句吧...

相关阅读

相关获取地图多边形点坐标

一、百度地图AK密钥申请 1、密钥申请地址：http://lbsyun.baidu.com/apiconsole/key 2、密钥申请配置：（1）应用类型：浏览器端；

水深无声/ 2023年03月14日 05:30/ 0 赞/ 308 阅读

相关 Tableau数据分析-Chapter07多边形地图和背景地图

Tableau数据分析-Chapter07多边形地图和背景地图 -------------------- > 本专栏将使用tableau来进行数据分析，Tableau数

拼搏现实的明天。/ 2023年01月08日 08:27/ 0 赞/ 246 阅读

相关 uniapp地图多边形使用

<template> <view> <map @tap='mapTap' :style="'width: 100%;'+ 'height:'+sc

绝地灬酷狼/ 2022年12月22日 09:52/ 0 赞/ 449 阅读

相关 uniapp 区域地图

<template> <view class="map-content"> <view class="map" id="map"></view>

刺骨的言语ヽ痛彻心扉/ 2022年09月02日 12:54/ 0 赞/ 370 阅读

相关 uniapp 使用高德地图

<template> <view> <view class="map" id="map"></view> </view> </t

分手后的思念是犯贱/ 2022年09月02日 12:50/ 0 赞/ 441 阅读

相关百度地图 JS 可编辑多边形

业务需要指定一个地图上的范围,为了便于采集坐标数据,开发以下程序 <!DOCTYPE html> <html> <hea

一时失言乱红尘/ 2022年08月18日 15:27/ 0 赞/ 280 阅读

相关多边型无序点排序（地图绘制多边形）

从这些点里随便选一个（比如最左边最下面哪一个）然后以这个点为原点按极角排序（极角相同按距离排序）前言任务需求要做一个区域高亮的功能，用到地

谁借莪１个温暖的怀抱￠/ 2022年04月11日 02:18/ 1 赞/ 403 阅读

相关 uniapp 高德地图接入

> 1.登陆高德地图开放平台并下载sdk【sdk如下】 function AMapWX(a){this.key=a.key,this.requestConfig={k

亦凉/ 2021年09月19日 21:08/ 0 赞/ 715 阅读

相关 uniapp地图-删除标记点

前言：本篇文章衔接了【[uniapp地图-标记点-多点连线][uniapp_-_-]】文章;下面是一个示例，用到的是本地数组，以及地图的标记点点击事件@markertap，点击

た入场券/ 2021年08月19日 22:53/ 0 赞/ 883 阅读

相关 uniapp 地图

使用: <map longitude="经度" latitude="纬度" markers="标记点"

缺乏、安全感/ 2021年07月24日 16:43/ 0 赞/ 694 阅读