uniapp 地图

缺乏、安全感 2021-07-24 16:43 686阅读 0赞

使用:
    	<map 
    		longitude="经度" 
    		latitude="纬度" 
    		markers="标记点" 
    		scale="缩放规模默认为16，最大为18"
    	><map/>
    	
    标记点
    	[
    		{	
    			longitude="经度",
    			latitude="纬度", 
    			iconPath:'标记图片',
    			width:图片宽,
    			height:图片高,
    			titile:'点击标记点后显示的文字'
    		}
    	]
    
    经纬度的获取
    	http://api.map.baidu.com/lbsapi/getpoint/index.html

[地图][Link 1]

代码示例:

<template>
    	<view class="contact">
    
    		<map name="" class='map' :longitude="jingdu" :latitude="weidu" :markers="marks" scale="15"></map>
    		
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				jingdu:0,
    				weidu:0,
    				marks:[{ longitude:0,latitude:0,iconPath:'../../static/2.png',width:30,height:30,title:'这里'}]
    			}
    		},
    		methods: { 
    			phone(){ 
    				uni.makePhoneCall({ 
    				    phoneNumber: '114' //仅为示例
    				});
    			}
    		}
    	}
    </script>
    
    <style lang='scss'>
    	.contact{ 
    		.img{ 
    			width: 750rpx;
    			height: 320rpx;
    		}
    		.info{ 
    			padding: 10rpx 20rpx;
    			font-size: 30rpx;
    			view{ 
    				line-height: 60rpx;
    				border-bottom: solid 1px #eee;
    			}
    		}
    		.map{ 
    			height: 750rpx;
    			width: 750rpx;
    		}
    	}
    </style>

[Link 1]: https://uniapp.dcloud.io/component/map

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp 中引入高德地图

uniapp 引入高德地图地图现在已经渗入到生活的方方面面，给生活带了极大的编译，那么我们如何才能在项目中引入地图呢首先看一下效果：联系地址这个地方在项目中

左手的ㄟ右手/ 2023年02月23日 08:26/ 0 赞/ 618 阅读

相关 uniapp-打开第三方地图

//打开第三方地图 export function toMapAPP(latitude, longitude, name) { let url =

小鱼儿/ 2023年01月03日 12:59/ 0 赞/ 291 阅读

相关 uniapp地图多边形使用

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

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

相关 uniapp 区域地图

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

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

相关 uniapp 使用高德地图

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

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

相关 uniapp 高德地图接入

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

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

相关 uniapp地图-标记点-多点连线

前言：正在使用uniapp开发地图这块不明白的小伙伴可以看看我以下的代码分享;下面是我开发中使用vue+uniapp遇到的地图问题，有的APP涉及到地理位置的功能，所以，地图

深碍√TFBOYSˉ_/ 2021年08月20日 02:01/ 0 赞/ 903 阅读

相关 uniapp地图-删除标记点

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

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

相关 uniapp地图-点击添加标记点

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPa

迈不过友情╰/ 2021年08月19日 13:27/ 0 赞/ 3129 阅读

相关 uniapp 地图

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

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