微信小程序——打开地图 选择位置 完整功能实现代码(定位,检索周边,可移动选点,可搜索,腾讯地图API)

小程序中打开地图选择店铺位置,地图定位选择地点实现方法如下,(仿美团外卖商家入驻店铺地址选择页面制作)

源码地址:

CSDN: 微信小程序——打开地图选择位置信息完整功能实现代码(定位,可移动选点,可搜索,腾讯地图API)_微信小程序打开地图标点收藏-HTML5代码类资源-CSDN下载

github: https://github.com/mcky1928/map

小程序地图实现,功能如下:

1. 默认地位显示地图,下面显示附近场所

2. 可输入搜索关键词,匹配地点

3. 点击地区,重新选择省市区

4. 拖动地图自动匹配选择中心位置

5. 可重新定位

效果图片如下:

代码如下:

1. shopMap.wxml

<!--pages/shopMap/shopMap.wxml-->
<!--绑定点击事件-->
<!--绑定输入事件-->
<view wx:if="{{addListShow}}">
<view class="top">
  <view class="back iconfont icon-fanhui" bindtap="back1"></view>
  <view class="search-box {{addListShow?'search-box1':''}}">
    <view class="region" bindtap="chooseCity">{{currentRegion.district}}</view>
    <view class="shu"></view>
    <input bindinput="getsuggest" placeholder="请输入您的店铺地址"></input>
  </view>
</view>
<!--关键词输入提示列表渲染-->
<view class="add-list-box">
<scroll-view class="add-list" scroll-y>
  <view class="add-item" wx:for="{{suggestion}}" wx:key="index">
    <!--绑定回填事件-->
    <view bindtap="backfill" id="{{index}}" data-name="{{item.title}}">
      <!--根据需求渲染相应数据-->
      <!--渲染地址title-->
      <view class="title">{{item.title}}</view>
      <!--渲染详细地址-->
      <view class="add">{{item.addr}}</view>
    </view>
  </view>
</scroll-view>
</view>
</view>


<view wx:if="{{!addListShow && !chooseCity}}">
<!--地图容器-->
<map id="myMap"
   style="width:100%;height:300px;"
   longitude="{{longitude}}"
   latitude="{{latitude}}" scale="17" bindregionchange="mapChange">
   <cover-view class="top">
      <cover-view class="back" bindtap="back1">
        <cover-image src="../../images/back.png"></cover-image>
      </cover-view>
      <cover-view class="search-box">
        <cover-view class="region" bindtap="chooseCity">{{currentRegion.district}}</cover-view>
        <cover-view class="shu"></cover-view>
        <cover-view class="placeholder" bindtap="showAddList">请输入您的店铺地址</cover-view>
      </cover-view>
   </cover-view>
   <cover-view class="map-prompt">您可拖动地图, 标记店铺准确位置</cover-view>
   <cover-image class="current-site-icon" src="../../images/my_marker.png"></cover-image>
   <cover-view class="reload" bindtap="reload">
      <cover-view class="center1">
        <cover-view class="center2"></cover-view>
      </cover-view>
   </cover-view>
</map>

<scroll-view class="near-list" scroll-y>
  <!--绑定回填事件-->
  <view class="near-item" wx:for="{{nearList}}" wx:key="index">
    <view class="current-site iconfont icon-location" wx:if="{{index == selectedId }}"></view>
    <!--根据需求渲染相应数据-->
    <view bindtap="chooseCenter" id="{{index}}" data-name="{{item.title}}">
      <!--渲染地址title-->
      <view class="title {{ index == selectedId?'title1':'' }}">{{item.title}}</view>
      <!--渲染详细地址-->
      <view class="add {{ index == selectedId?'add1':'' }}">{{item.addr}}</view>
    </view>
  </view>
</scroll-view>
<view class="bottom-box">
  <button bindtap="selectedOk">确认地址</button>
</view>
</view>

<view class="region-box" wx:if="{{chooseCity}}">
  <view class="region-top">
    <view class="region-back iconfont icon-fanhui" bindtap="back2"></view>
    <view class="title">选择城市</view>
  </view>
  <view class="region-tabs">
    <text class="tab" bindtap="showProvince">{{currentProvince}}</text>
    <text class="tab" bindtap="showCity" wx:if="{{!regionShow.province}}" bindtap="showCity">{{currentCity}}</text>
    <text class="tab" bindtap="showDistrict" wx:if="{{regionShow.district}}" bindtap="showDistrict">{{currentDistrict}}</text>
  </view>
  <scroll-view scroll-y style="height:1050rpx;">
    <view class="region-list" wx:if="{{regionShow.province}}">
      <view class="region-item" wx:for="{{regionData.province}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectProvince">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
    <view class="region-list" wx:if="{{regionShow.city}}">
      <view class="region-item" wx:for="{{regionData.city}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectCity">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
    <view class="region-list" wx:if="{{regionShow.district}}">
      <view class="region-item" wx:for="{{regionData.district}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}" bindtap="selectDistrict">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

2. shopMap.js

var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
  data: {
    addListShow: false,
    chooseCity: false,
    regionShow: {
      province: false,
      city: false,
      district: true
    },
    regionData: {}, 
    currentRegion: {
      province: '选择城市',
      city: '选择城市',
      district: '选择城市',
    },
    currentProvince: '选择城市',
    currentCity: '选择城市',
    currentDistrict: '选择城市',
    latitude: '',
    longitude: '',
    centerData: {},
    nearList: [],
    suggestion: [],
    selectedId: 0,
    defaultKeyword: '房产小区',
    keyword: ''
  },
  onLoad: function () {
    let self =this;
    self.mapCtx = wx.createMapContext('myMap')
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'W57BZ-JDB6X-XPA4H-Z76MI-73FF2-24BT4'
    });
    wx.showLoading({
      title: '加载中'
    });
    //定位
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        //console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        //你地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //console.log(res)
            self.setData({
              latitude: latitude,
              longitude: longitude,
              currentRegion: res.result.address_component,
              keyword: self.data.defaultKeyword
            })
            // 调用接口
            self.nearby_search();
          },
        });
      },
      fail(err) {
        //console.log(err)
        wx.hideLoading({});
        wx.showToast({
          title: '定位失败',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    })
  },
  onReady: function () {
    
  },
  //监听拖动地图,拖动结束根据中心点更新页面
  mapChange: function (e) {
    let self = this;
    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
      self.mapCtx.getCenterLocation({
        success: function (res) {
          //console.log(res)
          self.setData({
            nearList:[],
            latitude: res.latitude,
            longitude: res.longitude,
          })
          self.nearby_search();
        }
      })
    }
    
  },
  //重新定位
  reload: function () {
    this.onLoad();
  },
  //整理目前选择省市区的省市区列表
  getRegionData: function () {
    let self = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function (res) {//成功后的回调
        //console.log(res)
        let provinceArr = res.result[0];
        let cityArr = [];
        let districtArr = [];
        for (var i = 0; i < provinceArr.length; i++) {
          var name = provinceArr[i].fullname;
          if (self.data.currentRegion.province == name) {
            if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
              cityArr.push(provinceArr[i])
            } else {
              qqmapsdk.getDistrictByCityId({
                // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
                id: provinceArr[i].id,
                success: function (res) {//成功后的回调
                  //console.log(res);
                  cityArr = res.result[0];
                  self.setData({
                    regionData: {
                      province: provinceArr,
                      city: cityArr,
                      district: districtArr
                    }
                  })
                },
                fail: function (error) {
                  //console.error(error);
                },
                complete: function (res) {
                  //console.log(res);
                }
              });
            }
          }
        }
        for (var i = 0; i < res.result[1].length; i++) {
          var name = res.result[1][i].fullname;
          if (self.data.currentRegion.city == name) {
            qqmapsdk.getDistrictByCityId({
              // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
              id: res.result[1][i].id,
              success: function (res) {//成功后的回调
                //console.log(res);
                districtArr = res.result[0];
                self.setData({
                  regionData: {
                    province: provinceArr,
                    city: cityArr,
                    district: districtArr
                  }
                })
              },
              fail: function (error) {
                //console.error(error);
              },
              complete: function (res) {
                //console.log(res);
              }
            });
          }
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  onShow: function () {
    let self = this;
  },
  //地图标记点
  addMarker: function (data) {
    //console.log(data)
    //console.log(data.title)
    var mks = [];
    mks.push({ // 获取返回结果,放到mks数组中
      title: data.title,
      id: data.id, 
      addr: data.addr,
      province: data.province,
      city: data.city,
      district: data.district,
      latitude: data.latitude,
      longitude: data.longitude,
      iconPath: "/images/my_marker.png", //图标路径
      width: 25,
      height: 25
    })
    this.setData({ //设置markers属性,将搜索结果显示在地图中
      markers: mks,
      currentRegion: {
        province: data.province,
        city: data.city,
        district: data.district,
      }
    })
    wx.hideLoading({});
  },
  //点击选择搜索结果
  backfill: function (e) {
    var id = e.currentTarget.id;
    let name = e.currentTarget.dataset.name;
    for (var i = 0; i < this.data.suggestion.length; i++) {
      if (i == id) {
        //console.log(this.data.suggestion[i])
        this.setData({
          centerData: this.data.suggestion[i],
          addListShow: false,
          latitude: this.data.suggestion[i].latitude,
          longitude: this.data.suggestion[i].longitude
        }); 
        this.nearby_search();
        return;
        //console.log(this.data.centerData)
      }
    }
  },
  //点击选择地图下方列表某项
  chooseCenter: function (e) {
    var id = e.currentTarget.id;
    let name = e.currentTarget.dataset.name;
    for (var i = 0; i < this.data.nearList.length; i++) {
      if (i == id) {
        this.setData({
          selectedId: id,
          centerData: this.data.nearList[i],
          latitude: this.data.nearList[i].latitude,
          longitude: this.data.nearList[i].longitude,
        });
        this.addMarker(this.data.nearList[id]);
        return;
        //console.log(this.data.centerData)
      }
    }
  },
  //显示搜索列表
  showAddList: function () {
    this.setData({
      addListShow: true
    })
  },
  // 根据关键词搜索附近位置
  nearby_search: function () {
    var self = this;
    wx.hideLoading();
    wx.showLoading({
      title: '加载中'
    });
    // 调用接口
    qqmapsdk.search({
      keyword: self.data.keyword,  //搜索关键词
      //boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
      location: self.data.latitude + ',' + self.data.longitude,
      page_size: 20,
      page_index: 1,
      success: function (res) { //搜索成功后的回调
        //console.log(res.data)
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果,放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].ad_info.province,
            city: res.data[i].ad_info.city,
            district: res.data[i].ad_info.district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        self.setData({
          selectedId: 0,
          centerData: sug[0],
          nearList: sug, 
          suggestion: sug
        })
        self.addMarker(sug[0]);
      },
      fail: function (res) {
        //console.log(res);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //根据关键词搜索匹配位置
  getsuggest: function (e) {
    var _this = this;
    var keyword = e.detail.value;
    _this.setData({
      addListShow: true
    })
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: keyword, //用户输入的关键词,可设置固定值,如keyword:'KFC'
      location: _this.data.latitude + ',' + _this.data.longitude,
      page_size: 20,
      page_index: 1,
      //region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
      success: function (res) {//搜索成功后的回调
        //console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果,放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].province,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
          suggestion: sug,
          nearList: sug,
          keyword: keyword
        });
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //打开选择省市区页面
  chooseCity: function () {
    let self = this;
    self.getRegionData();
    self.setData({
      chooseCity: true,
      regionShow: {
        province: false,
        city: false,
        district: true
      },
      currentProvince: self.data.currentRegion.province,
      currentCity: self.data.currentRegion.city,
      currentDistrict: self.data.currentRegion.district,
    })
  },
  //选择省
  showProvince: function () {
    this.setData({
      regionShow: {
        province: true,
        city: false,
        district: false
      }
    })
  },
  //选择城市
  showCity: function () {
    this.setData({
      regionShow: {
        province: false,
        city: true,
        district: false
      }
    })
  },
  //选择地区
  showDistrict: function () {
    this.setData({
      regionShow: {
        province: false,
        city: false,
        district: true
      }
    })
  },
  //选择省之后操作
  selectProvince: function (e) {
    //console.log(e)
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentProvince: name,
      currentCity: '请选择城市',
    })
    if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市'){
      var provinceArr = self.data.regionData.province;
      var cityArr = [];
      for (var i = 0; i < provinceArr.length;i++){
        if(provinceArr[i].fullname == name){
          cityArr.push(provinceArr[i])
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: cityArr,
              district: self.data.regionData.district
            }
          })
          self.showCity();
          return;
        }
      }
    }else{
      let bj = self.data.regionShow;
      self.getById(id, name, bj)
    }
  },
  //选择城市之后操作
  selectCity: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentCity: name,
      currentDistrict: '请选择城市',
    })
    let bj = self.data.regionShow;
    self.getById(id, name, bj)
  },
  //选择区县之后操作
  selectDistrict: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    let latitude = e.currentTarget.dataset.latitude;
    let longitude = e.currentTarget.dataset.longitude;
    self.setData({
      currentDistrict: name,
      latitude: latitude,
      longitude: longitude,
      currentRegion: {
        province: self.data.currentProvince,
        city: self.data.currentCity,
        district: name
      }, 
      chooseCity: false,
      keyword: self.data.defaultKeyword
    })
    self.nearby_search();
  },
  //根据选择省市加载市区列表
  getById: function (id,name,bj) {
    let self = this;
    qqmapsdk.getDistrictByCityId({
      // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
      id: id, //对应接口getCityList返回数据的Id,如:北京是'110000'
      success: function (res) {//成功后的回调
        //console.log(res);
        if(bj.province){
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: res.result[0],
              district: self.data.regionData.district
            }
          })
          self.showCity();
        } else if (bj.city) {
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: self.data.regionData.city,
              district: res.result[0]
            }
          })
          self.showDistrict();
        } else {
          self.setData({
            chooseCity: false,
          })
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //返回上一页或关闭搜索页面
  back1: function () {
    if (this.data.addListShow) {
      this.setData({
        addListShow: false
      })
    }else {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  //关闭选择省市区页面
  back2: function () {
    this.setData({
      chooseCity: false
    })
  },
  //确认选择地址
  selectedOk: function () {
    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
    let prevPage = pages[pages.length - 2]; 
    //console.log(this.data.centerData)
    prevPage.setData({
      storeAddress: this.data.centerData.title
    })
    wx.navigateBack({
      delta: 1
    })
  }
})

3. shopMap.wxss

/* pages/shopMap/shopMap.wxss */
@import "../../lib/css/iconfont.wxss";

.top {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 0;
  left: 0;
  padding: 30rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}
.back {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  text-align: center;
  background: rgb(255,255,255);
  font-size: 50rpx;
  border-radius: 50%;
  float: left;
}
.back cover-image{
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  margin-top: 15rpx;
}
.search-box {
  width: 610rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: rgb(255,255,255);
  margin-left: 20rpx;
  float: left;
  overflow: hidden;
}
.search-box1 {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  background: #eee;
}
.search-box .region {
  width: 199rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-box .shu {
  width: 1rpx;
  height: 80rpx;
  background:#ccc;
  float: left;
}
.search-box input {
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  float: left;
}
.search-box .placeholder{
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
}
.add-list-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 998;
  padding-top: 150rpx;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.add-list {
  width: 100%;
  height: 1000rpx;
}
.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}
.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-site-icon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.near-list {
  height: 650rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.near-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx 30rpx 90rpx;
  text-align: left;
  border-bottom: 1px solid #eee;
  position: relative;
}
.current-site {
  font-size: 40rpx;
  color: #3095F9;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
}
.near-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .title1 {
  color: #3095F9;
}
.near-item .add1 {
  color: #3095F9;
}
.bottom-box {
  width: 100%;
  padding: 20rpx;
  background: #fff;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 88;
  overflow: hidden;
}
.bottom-box button{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: none;
  background: #3095F9;
  color: #fff;
  font-size: 36rpx;
}

.region-box {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}
.region-box .region-top {
  position: relative;
  font-size: 40rpx;
  color: #282828;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.region-box .region-back {
  width: 80rpx;
  height: 80rpx;
  font-size: 50rpx;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.region-box .region-tabs{
  line-height: 60rpx;
  font-size: 20rpx;
}
.region-tabs .tab {
  min-width: 100rpx;
  max-width: 200rpx;
  line-height: 40rpx;
  font-size: 20rpx;
  color: #3095F9;
  text-align: center;
  border: 1rpx solid #3095F9;
  border-radius: 20rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 20rpx;
  padding: 3rpx 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.region-list .region-item{
  font-size: 30rpx;
  color: #282828;
  line-height: 80rpx;
  padding: 10rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.map-prompt {
  width: 420rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #707070;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.reload {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}
.reload .center1 {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #3095F9;
  border-radius: 50%;
  margin: 24rpx auto;
}
.reload .center2 {
  width: 25rpx;
  height: 25rpx;
  background: #3095F9;
  border-radius: 50%;
  margin: 3rpx auto;
}

4. 引用的阿里图标 iconfont.wxss 

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.woff?t=1554258412999') format('woff'),
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.ttf?t=1554258412999') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.svg?t=1554258412999#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-iconfontzhizuobiaozhun16:before {
  content: "\e60f";
}

.icon-location:before {
  content: "\e619";
}

.icon-dayuhao:before {
  content: "\e600";
}

.icon-jizuobiaotu:before {
  content: "\e613";
}

.icon-dayuhao1:before {
  content: "\e65c";
}

.icon-zuobiao:before {
  content: "\e657";
}

.icon-zhengque:before {
  content: "\e64a";
}

.icon-fanhui:before {
  content: "\e60d";
}

.icon-iconfront-:before {
  content: "\e620";
}

5. 用到的图片

   

注:

实际开发中,腾讯地图api的key 和引用的阿里图标库建议改成自己的。

代码写的比较乱,还没有整理,使用的话可以整理一下。

搜索附近位置的关键字设置可参考 WebService API | 腾讯位置服务

  • 65
    点赞
  • 404
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 71
    评论
评论 71
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mickey_于浩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值