uniapp 点击按钮打开地图，显示当前定位和指定标点

效果如图，左边是我指定的标点位置，右边是我自己的定位位置

研究了一整天，终于搞出来了，刚开始以为要用第三方插件，一直在试高德，腾讯这些，都没搞好，结果发现根本不用第三方。。。很简单的

上代码。

直接复制粘贴，就是我上图的效果

1 ， iconPath 是标注点图标，要改成自己目录下的图片，默认的图标很丑，我自己改了

2 ，自定义标记点，我这里是写死的经纬度，实际开发可以发请求用接口返回的经纬度

3 ，markers 就是标记点数组， id是唯一标识

4 ， :scale 是地图的缩放比例，自己去调，看怎么样最好

<template><view><mapclass="map":longitude="longitude":latitude="latitude":show-location="true":markers="markers":scale="16"style="width: 100%; height: 450px;"></map></view>
</template><script>
export default {data() {return {// 用户当前定位信息latitude:"",longitude:"",// 自定义标记点markers: [{id: 2,latitude: '23.124088',longitude: '113.369389',iconPath:'../../static/phone.jpg',width: 30,height: 30,}]}},onLoad() {this.init()},methods: {// 初始化init() {let that = this// 拿到用户所在位置信息uni.getLocation({type: 'gcj02',success:(res)=> {this.latitude=res.latitude,this.longitude=res.longitude,that.markers.push({id:1,latitude:this.latitude,longitude:this.longitude,iconPath:'../../static/location.jpg',width: 30,height: 30,})}})}}
}</script><style scoped>
map{width: 100%;height:600px
}
</style>

uniapp 点击按钮打开地图，显示当前定位和指定标点相关推荐

access窗体转换html,access点击按钮打开窗体
如何在 Access 2007 的窗体中实现点击按钮打开另一首先有4个名称分别为A.B.C.D的窗体,已经建立好了. 我新建了一个空打开一个Access数据库软件,可以打开已创建好的数据库,在[数据库 ...
Uniapp之使用h5+打开地图导航
需求:点击某一个按钮打开地图导航 1.判断当前设备平台 2.判断需要使用的地图APP是否存在 3.存在则调用地图APP,不存在则进行提示接下来就是直接上代码: function openMap(la ...
通过点击按钮打开新的窗口
通过点击按钮打开新的窗口通过点击某个按键打开新的窗口,原来的窗口关闭或者不关闭: 主要语句 //创建新的界面 A a=new A(); //将新的界面展示出来,此参数设置为true A.setVis ...
js 点击按钮打开浏览器新页签，兼容版
话不多说直接上代码,这是千辛万苦寻来的,帮助需要帮助的人. <html><head>点击按钮打开浏览器新页签</head><body><div o ...
点击按钮打开新页面（携带参数）
点击按钮打开新页面(携带参数) <el-button size="small" class="button-right" @click="cre ...
用户输入自己的【姓名年龄爱好】 + 加CP【姓名年龄爱好】，点击按钮，页面显示该用户的信息点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）
本文主要是利用了BOM.DOM和json/js数据的转换等知识来综合操练的一个小例子例子如下: 用户输入自己的[姓名年龄爱好] + 加CP[姓名年龄爱好],点击按钮,页面显示该用户的信息点 ...
uniapp点击按钮保存页面为图片到本地
uniapp点击按钮保存页面为图片到本地首先写一个按钮创建事件 <button class="info" @click="capture()"> ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
uni-app点击按钮弹出提示框
uni-app点击按钮弹出提示框点击事件 <view class="footerbotom_button" @click="ajp">立即支付&l ...

uniapp 点击按钮打开地图，显示当前定位和指定标点

uniapp 点击按钮打开地图，显示当前定位和指定标点相关推荐

最新文章

热门文章

uniapp 点击按钮打开地图，显示当前定位 和 指定标点

uniapp 点击按钮打开地图，显示当前定位 和 指定标点相关推荐

最新文章

热门文章

uniapp 点击按钮打开地图，显示当前定位和指定标点

uniapp 点击按钮打开地图，显示当前定位和指定标点相关推荐