★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

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

 2021/3/17 0:30:25  字体:  浏览 405 我要评论
需要定制网站程序、公众号程序、微信小程序可以联系:565449214或者加微信13961347334(备注:需要技术)
或者在处理一些技术问题时,有什么不懂的地方,随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论
当前标签
地图map





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

相关阅读
( 2021/3/16 23:52:37 )uni.openLocation打开地图导航没反应解决方式(参数都设置对就是打不开)
( 2020/11/20 21:47:17 )asp无限级调用分类显示
( 2020/10/1 17:07:20 )uni-app一个像商城分类中心一样的联动侧边栏导航分类
( 2020/9/25 20:44:34 )uni-app基础知识页面事件与web事件的对比
( 2020/9/15 15:27:24 )uni-app与HTML的标签变化对比
( 2019/5/2 21:47:46 )ASP利用fso读取文件夹里所有文件的名字
( 2019/4/16 14:29:04 )asp导出内容到excel表并自定义命名后下载(非打开)
( 2018/6/21 17:35:47 )ASP操作access或sqlserver数据库的函数库
共有0条关于《uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
uni-app
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
用uni-app开发微信小程序用uni.makePhoneCall拨打电话
uni.openLocation打开地图导航没反应解决方式(参数都设置对就是打不开)
uni-app按钮button利用css伪类after去除灰色边框
微信小程序发送给朋友与分享到朋友圈显示灰色的但是按钮分享可以使用
uni-app微信小程序分享微信好友与分享到朋友圈功能
uni-app开发的微信小程序在线支付
uni-app三目运算class和style
更多>>最新添加文章
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
用uni-app开发微信小程序用uni.makePhoneCall拨打电话
uni.openLocation打开地图导航没反应解决方式(参数都设置对就是打不开)
各个苹果手表型号版本对比以及查看苹果手机Apple Watch型号
微信小程序腾讯视频播放组件tencentvideo(wxa75efa648b60994b)
微信小程序直播组件live-player-plugin(wx2b03c6e691cd7370)
jquery设置或获取修改classname
微信公众号用户关注时自动推送回复小程序卡片(图文卡片)不需要第三方平台就可以做
更多>>随机抽取信息
初学入门:一组常用的弹出窗口用法总结
非常酷的javascript实现万年历功能
loading图片
Vista中使用IIS 7.0三个常见问题
黑色的非常酷的简单JavaScript日历及说明
深山行者个人网站程序V0.1
div+css黑色焦点图(幻灯片效果非常 不错)
用GetString来提高ASP的速度