订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址

2021/3/17 0:30:25 字体: 浏览 3627





<map
id="map"
:longitude="map_longitude"
:latitude="map_latitude"
:markers="map_alllist"
@markertap="markertap"
@regionchange="regionchange"
scale="14"
show-location
class="map_cont"
style="width:100%;height:500rpx;"></map>


01. 请看一下这个下面是map_alldata的数据:
"mapdian_arrdata": [{
    "data_state": "success",
    "data_list": [{
            "id": 0,
            "latitude": "34.719604",
            "longitude": "119.346886",
            "width": "50",
            "height": "50",
            "iconPath": "http://192.168.0.108/images/pub/location.png",
            "title": "深山工作室",
        },
        {
            "id": 1,
            "latitude": "34.728070",
            "longitude": "119.334869",
            "width": "50",
            "height": "50",
            "iconPath": "http://192.168.0.108/images/pub/location.png",
            "title": "深山游有限公司",
        }
    ]
}],
   

02. 多个地图切换
<scroll-view class="list_daomenu" scroll-x="true">
    <view class="l_li" v-for="(item, index) in map_alldata.data_list" :key="index">
        <view @tap="gotonewmap('index',item.id)" :class="['l_text',dizi_id == item.id?'hover':'']">{{item.mcomname}}</view>
    </view>
</scroll-view>


<!-- 这下面代码是为了当上面代码切换公司名称时,跳出相应的地址与联系电话 -->
<view class="com_data" v-if="gs_phone || gs_home">
    <view class="l_li l_phone"><text class="l_sub" @tap="call_phone('' + gs_phone)">点击拨打电话</text><text @tap="call_phone('' + gs_phone)">{{gs_phone}}</text></view>
    <view class="l_li l_home"><text class="l_sub" @tap="navigate()">点击导航到</text><text>{{gs_home}}</text></view>
</view>



03. 请看一下data里面的数据

data() {
      return {
          map_alldata: '',
          map_alllist: [{"id": 0,"latitude": "34.719604","longitude": "119.346886","width": "50","height": "50","iconPath": "http://192.168.0.108/images/pub/location.png","title": "深山工作室"},{"id": 1,"latitude": "34.728070","longitude": "119.334869","width": "50","height": "50","iconPath": "http://192.168.0.108/images/pub/location.png","title": "深山有限公司",}],
          map_latitude: '',
          map_longitude: '',
          go_latitude: '',
          go_longitude: '',
          dizi_id: 0,
          gs_title: '',
          gs_phone: '',
          gs_home: '',
      }
  },


04. 这里是处理方式


methods: {
  //打电话
  call_phone: function(bphone) {
      uni.makePhoneCall({
          phoneNumber: '' + bphone, // 手机号
      });
  },
  //解析对应的地址信息,电话,信息
  map_jiexi: function(dt_id) {
      _self.map_latitude = _self.map_alllist[dt_id].latitude;
      _self.map_longitude = _self.map_alllist[dt_id].longitude;
      _self.go_latitude = _self.map_latitude;
      _self.go_longitude = _self.map_longitude;
      _self.gs_title = _self.map_alllist[dt_id].mcomname;
      _self.gs_phone = _self.map_alllist[dt_id].mcomphone;
      _self.gs_phone1 = _self.map_alllist[dt_id].mcomphone1;
      _self.gs_phone2 = _self.map_alllist[dt_id].mcomphone2;
      _self.gs_phone3 = _self.map_alllist[dt_id].mcomphone3;
      _self.gs_phone4 = _self.map_alllist[dt_id].mcomphone4;
      _self.gs_home = _self.map_alllist[dt_id].mcomhome;
  },

  //点击地图标点时触发事件
  markertap: function(res) {
      let ditu_id = res.detail.markerId;
      _self.dizi_id = ditu_id;
      this.map_jiexi(ditu_id);
  },
  //点击地图转到导航
  navigate: function() {
      uni.openLocation({
          latitude: Number(_self.go_latitude), //要去的纬度-地址-如果放字符型会出错,必须要用Number
          longitude: Number(_self.go_longitude), //要去的经度-地址
          name: '' + _self.gs_title,
          address: '' + _self.gs_home,
          success: function() {
              console.log('success');
          }
      })
  },

  //多个地址切换时,更新地图信息
  gotonewmap: function(fansi, ditu_id) {
      _self.dizi_id = ditu_id;
      this.map_jiexi(ditu_id);
  },
 
 
 

相关阅读
深山旅行社管理系统二次开发是怎么收费?
郑州廿四旅游
'禁止站外提交页面和数据
刘浏家俱
uni-app基础知识事件绑定@click与@tap点击事件区别
设置两个未知高度的DIV保持等高
div中的图片链接居中的问题
舞阳风情旅行社
共有0条关于《uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
uni-app开发表单input组件的一些规则说明自己预留使用
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
微信小程序客服会话只能过button让用户主动触发
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
更多>>最新添加文章
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
aliyun阿里云续费域名优惠口令(注册、续费都可以使用)
windows7环境下安装配置jdk
python对微信操作要用到这两个库wxpy与itchat
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
解决国内 github.com 打不开的准确方法
更多>>随机抽取信息
在网页标题栏上或收藏夹前面显示网站ico小图标的方法
把以前的做的个人网站程序提供下载,程序大了点,不过全
01. windows xp 安装iis视频教程
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
文本框禁止方式
盐城市航空假日旅行社有限公司