<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. 請(qǐng)看一下這個(gè)下面是map_alldata的數(shù)據(jù)：
"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. 多個(gè)地圖切換
<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>


<!-- 這下面代碼是為了當(dāng)上面代碼切換公司名稱時(shí)，跳出相應(yīng)的地址與聯(lián)系電話 -->
<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)">點(diǎn)擊撥打電話</text><text @tap="call_phone('' + gs_phone)">{{gs_phone}}</text></view>
    <view class="l_li l_home"><text class="l_sub" @tap="navigate()">點(diǎn)擊導(dǎo)航到</text><text>{{gs_home}}</text></view>
</view>



03. 請(qǐng)看一下data里面的數(shù)據(jù)

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, // 手機(jī)號(hào)
      });
  },
  //解析對(duì)應(yīng)的地址信息，電話，信息
  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;
  },

  //點(diǎn)擊地圖標(biāo)點(diǎn)時(shí)觸發(fā)事件
  markertap: function(res) {
      let ditu_id = res.detail.markerId;
      _self.dizi_id = ditu_id;
      this.map_jiexi(ditu_id);
  },
  //點(diǎn)擊地圖轉(zhuǎn)到導(dǎo)航
  navigate: function() {
      uni.openLocation({
          latitude: Number(_self.go_latitude), //要去的緯度-地址-如果放字符型會(huì)出錯(cuò)，必須要用Number
          longitude: Number(_self.go_longitude), //要去的經(jīng)度-地址
          name: '' + _self.gs_title,
          address: '' + _self.gs_home,
          success: function() {
              console.log('success');
          }
      })
  },

  //多個(gè)地址切換時(shí)，更新地圖信息
  gotonewmap: function(fansi, ditu_id) {
      _self.dizi_id = ditu_id;
      this.map_jiexi(ditu_id);
  },