精华内容
下载资源
问答
  • 开发小程序的时候,有时候要做打开地图选择位置和打开地图查看当前位置。我前段时间刚做的时候也是一脸懵逼(新手上路)。 我是用的uniapp做的,配置方法和原生小程序的配置方法不太一样。下面就是我写的配置方法...

    开发小程序的时候,有时候要做打开地图选择位置和打开地图查看当前位置。我前段时间刚做的时候也是一脸懵逼(新手上路)。

    我是用的uniapp做的,配置方法和原生小程序的配置方法不太一样。下面就是我写的配置方法以及步骤,感兴趣的大家可以看看。

    第一步:uniapp需要先调取用户授权请求询问用户是否授权
    uni.authorize({
        scope: 'scope.userLocation',
        success() {
            uni.getLocation()
        }
    })
    

    详细文档说明在这链接: 点击这里.

    第二步:我这里是做获取用户位置,所以其他功能暂时就不说了。
    2.1:找到uniapp配置文件
    找到uniapp配置文件
    2.2:找到小程序配置勾选位置接口,描述里所填项就是授权时向用户展示的授权原因
    在这里插入图片描述

    剩下的就可以开始调取不同的api,比如说选择位置和查看位置
    打开地图选择位置官方文档: 点击这里
    打开地图选择位置官方文档: 点击这里

    	// 点击调起地图选择位置
    			goMap() {
    				uni.authorize({
    					scope: 'scope.userLocation',
    					success(res) {
    						uni.chooseLocation({
        						success: function (res) {
           							 console.log('位置名称:' + res.name);
           							 console.log('详细地址:' + res.address);
           							 console.log('纬度:' + res.latitude);
           							 console.log('经度:' + res.longitude);
       							 }
    						});
    					},
    					fail(err) {
    				
    					}
    				})
    			},
    
    	// 点击调起地图查看位置
    			goMap() {
    			//查看位置需要传经纬度才能执行
    				const lat = parseFloat(latitude)
    				const log = parseFloat(longitude)
    
    				uni.authorize({
    					scope: 'scope.userLocation',
    					success(res) {
    						uni.openLocation({
    							latitude: lat,
    							longitude: log,
    							success: function() {}
    						});
    					},
    					fail(err) {
    						
    					}
    				})
    			},
    

    以上就是uniapp打开地图选择位置(查看位置)的完整使用方法。(如有问题,请立即提出。)

    展开全文
  • 打开地图选择位置wx.chooseLocation(OBJECT) 1、wx.chooseLocation(OBJECT)官方文档及注意事项 wx.chooseLocation(OBJECT)官方文档 2、授权(调用这个接口不授权也可以,不会报错或警告) app.json 与pages同级: ...

    本博客为博主原创,若需转载请联系博主征得同意。有不当之处,敬请指出,共同进步,谢谢!
    打开地图选择位置wx.chooseLocation(Object object)

    1、wx.chooseLocation(Object object)官方文档及注意事项

    wx.chooseLocation(OBJECT)官方文档
    在这里插入图片描述

    2、授权(调用这个接口不授权也可以,不会报错或警告)
    app.json
    与pages同级:
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }
    
    3、wxml
    <!--pages/test/test.wxml-->
    <text>pages/test/test.wxml</text>
    <view class="container">
      <button bindtap='getLocation'>打开地图选择位置</button>
      <view wx:if="{{address !=''}}">
        <view>位置名称:{{name}}</view>
        <view>详细地址:{{address}}</view>
        <view>纬度:{{latitude}}</view>
        <view>经度:{{longitude}}</view>
      </view>
    </view>
    </view>
    

    在这里插入图片描述

    4、js
    // pages/test/test.js
    //获取应用实例
    const app = getApp()
    Page({
      data: {
        name: '',
        address: '',
        latitude: '',
        longitude: ''
      },
      getLocation: function () {
        var _this = this;
        wx.chooseLocation({
          success: function (res) {
            var name = res.name
            var address = res.address
            var latitude = res.latitude
            var longitude = res.longitude
            _this.setData({
              name: name,
              address: address,
              latitude: latitude,
              longitude: longitude
            })
          },
          complete(r){
            console.log(r)
            console.log(222)
          }
        })
      }
    })
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 小程序中打开地图选择店铺位置地图定位选择地点实现方法如下,(仿美团外卖商家入驻店铺地址选择页面制作) 源码地址: CSDN:https://download.csdn.net/download/yu17310133443/11085028 github:...

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

    源码地址:

    CSDN: https://download.csdn.net/download/yu17310133443/11085028

    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 和引用的阿里图标库建议改成自己的。

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

    搜索附近位置的关键字设置可参考 https://lbs.qq.com/webservice_v1/guide-appendix.html

    展开全文
  • 1、实现打开一个地图页,用户可以自己选择位置,可以搜索联想位置,并获取选择后的位置信息和经纬度 2、腾讯key需要到腾讯地图开发者去注册申请,个人账号和企业的调用量有很大差别。 3、引入js文件,传一个事件...

     1、实现打开一个地图页,用户可以自己选择位置,可以搜索联想位置,并获取选择后的位置信息和经纬度

    2、腾讯key需要到腾讯地图开发者去注册申请,个人账号和企业的调用量有很大差别。

    3、引入js文件,传一个事件处理的回调函数。用户未授权位置时会触发提醒开启位置授权模态框

    var key = 'Xkkkkkkkkkkskdkktkkk'; //腾讯地图申请的key
    
    export const getSiteMap = function(fn) {
    
    // var that = this;
    
    wx.authorize({
    
    scope: 'scope.userLocation',
    
    complete: function(res) {
    
    console.log(res)
    
    if (res.errMsg === "authorize:ok") {
    
    chooseLocation(fn)
    
    } else {
    
    wx.showModal({
    
    title: '提示',
    
    content: '请授权获取您的位置信息',
    
    showCancel: true,
    
    confirmColor: '#26C451',
    
    complete(res) {
    
    console.log(res)
    
    if (res.confirm) {
    
    wx.openSetting({
    
    complete(res) {
    
    if (res.errMsg === "openSetting:ok") {
    
    chooseLocation(fn)
    
    }
    
    }
    
    })
    
    }
    
    }
    
    })
    
    
    
    }
    
    
    
    }
    
    })
    
    
    
    }
    
    
    
    function chooseLocation(fn) {
    
    wx.chooseLocation({
    
    success(str) {
    
    console.log(str)
    
    fn(str)
    
    //发送请求通过经纬度反查地址信息
    
    // var getAddressUrl = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + str.latitude + "," + str.longitude + "&key=" + key + "&get_poi=1";
    
    // wx.request({
    
    // url: getAddressUrl,
    
    // success(result) {
    
    // console.log(result)
    
    // var province = result.data.result.address_component.province;
    
    // var city = result.data.result.address_component.city;
    
    // var district = result.data.result.address_component.district;
    
    // var address = result.data.result.formatted_addresses.recommend;
    
    // console.log('省市县:' + province + city + district)
    
    // console.log('地址:' + address)
    
    // that.setData({
    
    // "input[2].val": [province, city, district],
    
    // "input[3].val": address
    
    // })
    
    // }
    
    // })
    
    }
    
    })
    
    }

     

    展开全文
  • 微信小程序-打开地图选择位置

    千次阅读 2018-12-05 14:40:25
    微信小程序地图自动定位位置:   方法步骤如下: 1.申请获取用户地址的权限; 2.打开地图选择; 3.由于获取到的地址是一串字符串,所以必须通过经纬度反查地址分隔省市县;(如不需要分隔可省略)获取之后...
  • 微信小程序地图选择位置

    千次阅读 2019-02-21 15:18:21
    代码片段 select.wxml &lt;view&gt;&lt;label&gt;详细地址:&lt;/label&gt; &lt;text&...选择位置&lt;/button&gt;&lt;/view&gt; select.js Page({ d
  • 将固定定位标记置于地图中心点,拖动地图,将需要搜索的位置拖至该标记点,然后获取地图中心点的经纬度,这就是我们所需要的经纬度了 1、效果图 2、代码演示 json 文件 { "defaultTitle": "获取冷库位置" } axml ...
  • 最近需求允许小程序打开地图位置选择详细地址。貌似wx.chooseLocation()可以实现。很自信的就进行开发。开发完在手机上测试bug来了。苦逼的开启翻阅开发文档。。。 踩坑一: wx.chooseLocation()获取地理位置。...
  • 第一篇博客,,近期遇到一个关于地图选点显示地理位置与自定义回到定位按钮的需求, 以前做过,也是参考大神们的经验,之所以写出来就是为了把遇到的坑写一下,文笔不好,请谅解百度地图api 貌似是没有显示这个定位...
  • 高德地图-实现地图搜索点选位置功能 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport...
  • 微信小程序地图选择位置

    万次阅读 2018-05-10 09:27:10
    实现效果很多小程序都有如下需求:小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化点击地址选择地点选择地点之后源码...
  • 那么如何让用户更好的选择所需服务的位置呢? 当然实现方法非常非常多,今天我们要做一个类似于滴滴打车中起点和终点位置选择的组件。最终实现的效果就是以上的gif部分。组件所依赖的项目当然该组件是一个vue组件。...
  • 高德地图选择地理位置

    千次阅读 2018-05-17 12:20:24
    //确定位置 function set_position(a,b){  AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {  var map = new AMap.Map('allmap', {  zoom: 16,  scrollWheel: true,  center: [a, b] ...
  • 微信小程序 —— 地图选择位置

    千次阅读 2018-05-14 12:56:29
    需求分析: 一些小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化.今天我们就来看一下如何实现这个功能具体实现// index...
  • 因为uni-app本身就有点击后选择位置的功能, uni.chooseLocation后出现的是这样的 完整方法为 wakeMap() { uni.chooseLocation({ success: (res) => { console.log('位置名称:'
  • ,在这个函数中,调用打开地图选择位置的 API , wx.chooseLocation() ,代码如下所示: handleAddressClick ( ) { wx . chooseLocation ( { success : this . handleChooseLocationSuccess . bind ( ...
  • 基于百度地图的地理位置选择功能

    千次阅读 2015-10-04 08:08:41
    由于O2O的火爆,地图定位功能在目前的app里随处可见,今天就来写一下基于百度地图的地理位置选择功能的简单实现。首先肯定是到百度官网注册应用申请apikey 这个没什么好说的,但是要注意的是百度提供的jar包是可以...
  • 腾讯地图H5位置获取

    万次阅读 2018-11-09 09:35:53
    腾讯地图H5位置获取 直接ctrl+c 就行了 直接打开 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ...
  • 高德地图jsAPI,定位和选择位置

    千次阅读 2019-02-12 11:03:30
    一、前端页面 #container { width: 700px;...这里是地图控件的容器 &lt;/div&gt; 二、js 首先引入api &lt;script type="text/javascript" src="https://webapi.am...
  • Android百度地图定位后获取周边位置在列表中展示并选择
  • 百度ECharts地图 地名位置坐标微调

    千次阅读 2019-09-04 16:24:56
    百度ECharts地图 地名位置坐标微调继上篇百度ECharts地图Json数据在线下载之后-----百度Echarts用的很好,但是地图中,地市名字不居中或者重叠。下载的地图json数据里坐标位置导致出现这种问题,通过修改json数据中...
  • 如题,百度地图定位怎么获得附近多个位置,类似微博签到选择位置的功能?
  • 百度地图获取周边位置

    千次阅读 2015-08-14 15:48:25
    百度地图API,通过经纬度坐标,查询周边位置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,302
精华内容 36,520
关键字:

地图选位置