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

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

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





<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);
  },
 
 
 

相关阅读
深山留言板警察出动效果
CSS布局实例:上中下三行,中间自适应
innerHTML支持firefox火狐
右下角弹出框带关闭,非常不错,可以用于后台提示
一些关于素材的网站
可移动的弹出层
绵阳市康辉国际旅行社有限责任公司
利用java使图片左右上下循环连续滚动不出现空白
共有0条关于《uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
更多>>同类信息
uni-app开发表单input组件的一些规则说明自己预留使用
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
微信小程序客服会话只能过button让用户主动触发
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
更多>>最新添加文章
呼伦贝尔市北天草原旅行社有限公司
四川悠旅地旅游有限公司
连云港五洲旅行社有限公司
邓州市途鸿旅行社
连云港华夏国际旅行社有限公司
重庆长航江山国际旅行社
松原市海航商务旅行社
广西亚太国际旅行社有限公司
更多>>随机抽取信息
innerHTML动态改变ID的CSS样式表
旅行社手机网站模板4
昆山假日旅行社
对于转换的不确定数数用ubound进行下限处理
两个ASP中防止SQL注入式攻击
仿淘宝首页商品分类列表效果