E企盈营销工具技术服务商 热线:4006-838-530

web实现小程序chooseLocationapi(使用腾讯地图,使用微信jssdk)

E企盈直播平台营销卖货系统

2019独角兽企业重金招聘Python工程师标准                                                                                          首先项目为单页面vue项目 在index中引入需要的qqmap.js(这里会有一个小问题,没有注册的js,在打包时,不会打包,所以请去index.ejs去注册) 下面是代码 template  div class=”main”    div class=”topBar”      wx-button :size=”‘mini'”                 @click=”chooseFail”取消/wx-button      span style=”line-height: 2.3;color:black;font-weight: 900;”位置/span      wx-button :type=”‘primary'”                 :size=”‘mini'”                 @click=”chooseOK”确定/wx-button    /div    div class=”searchBar”      wx-input :placeholder=”‘搜索'”                style=”width:90%;margin-left: 5%;height: 0.3rem;border-radius: 3px;”                @change=”searchAddress”/wx-input    /div    div id=”container1″         :style=”‘height:’+height+’px;'”/div    div class=”addressList”      div class=”item”           v-for=”(item,index) in list”           @click=”chooseAddress(index,item.latLng.lat,item.latLng.lng)”        div style=”display:flex;flex-direction: column;width:80%”          span class=”address”                style=”font-size:16px;font-weight: 600;”{{item.name}}/span          span class=”address”                style=”font-size:12px;”{{item.address}}/span        /div        div style=”text-align:right”          img v-show=”item.ischeck”               src=”https://res.o2o.cn/img/0611a8fb49de4d0db9321541347dc5a4.png”        /div      /div    /div  /div/templatestyle scoped#container1 {  width: 3.75rem;  height: 3rem;}.main {  display: flex;  flex-direction: column;  height: 100%;  width: 100%;}.topBar {  display: flex;  justify-content: space-between;  padding: 0.1rem;}.searchBar {  width: 100%;  display: flex;  padding: 0.1rem;}.addressList {  width: 100%;  height: 3rem;  background-color: white;  overflow: scroll;}.item {  display: flex;  flex-direction: row;  padding-left: 5%;  color: black;  width: 100%;  height: 0.4rem;  border-bottom: 1px solid #f3f3f4;  margin-top: 5px;  justify-content: space-between;}.address {  width: 80%;  overflow: hidden;  text-overflow: ellipsis;  -o-text-overflow: ellipsis;  white-space: nowrap;  display: block;}input::-ms-input-placeholder {  text-align: center;}input::-webkit-input-placeholder {  text-align: center;}/stylescriptimport axios from “axios”;const qq = window.qq;var map,  geocoder,  searchService,  event,  ismove = null;var clat,  clng = null;const API_PROXY =  “https://livefamily.o2o.com.cn/ApiNone/CrossDomainRequest/?url=”;// “https://bird.ioliu.cn/v1/?url=”;export default {  data() {    return {      height: 0,      list: [],      lastChoose: -1    };  },  mounted() {    console.info(“地图选址”);    var lat,      lng = null;    var that = this;    var height = window.innerHeight;    var width = window.innerWidth;    var topHeight = document.getElementsByClassName(“topBar”)[0].clientHeight;    var searchHeight = document.getElementsByClassName(“searchBar”)[0]      .clientHeight;    var addressHeight = document.getElementsByClassName(“addressList”)[0]      .clientHeight;    this.height = height – topHeight – searchHeight – addressHeight;    var mapHeight = height – topHeight – searchHeight – addressHeight;    setTimeout(function() {      wx.getLocation({        success: function(res) {          lat = res.latitude;          lng = res.longitude;          console.info(“回调坐标” + lat + lng);          map = new qq.maps.Map(document.getElementById(“container1”), {            center: new qq.maps.LatLng(lat, lng), // 地图的中心地理坐标。31.4708600000  120.2705000000            zoom: 15 // 地图的中心地理坐标。          });          var middleControl = document.createElement(“div”);          middleControl.style.left = width / 2 – 21 + “px”;          middleControl.style.top = mapHeight / 2 – 37 + “px”;          middleControl.style.position = “relative”;          middleControl.style.width = “36px”;          middleControl.style.height = “36px”;          middleControl.style.zIndex = “100000”;          middleControl.innerHTML =            ‘img style=”width:36px;height:36px;” src=”https://res.o2o.cn/img/94780ecf18784a44b85e9cad5d2061f1.png” /’;          document.getElementById(“container1”).appendChild(middleControl);          //返回地图当前中心点地理坐标          console.info(“latlng:” + map.getCenter());          //当地图中心属性更改时触发事件          event = qq.maps.event.addListener(map, “center_changed”, function() {            that.exchangeAddress(map.getCenter().lat, map.getCenter().lng);          });          setTimeout(function() {            var marker = new qq.maps.Marker({              position: new qq.maps.LatLng(lat, lng),              animation: qq.maps.MarkerAnimation.DROP,              map: map            });            geocoder = new qq.maps.Geocoder({              complete: function(result) {                clat = result.detail.location.lat;                clng = result.detail.location.lng;                qq.maps.event.removeListener(event);                if (ismove) {                  map.setCenter(result.detail.location);                  ismove = null;                }                setTimeout(function() {                  event = qq.maps.event.addListener(                    map,                    “center_changed”,                    function() {                      that.exchangeAddress(                        map.getCenter().lat,                        map.getCenter().lng                      );                    }                  );                }, 1000);              }            });            //调用Poi检索类            searchService = new qq.maps.SearchService({              complete: function(results) {                var pois = results.detail.pois;                for (let i = 0; i pois.length; i++) {                  pois[i][“ischeck”] = false;                }                that.list = pois;              }            });            //自定义控件            function CustomZoomControl(controlDiv, map) {              function update() {                map.panTo(new qq.maps.LatLng(lat, lng));              }              update();              //添加dom监听事件              qq.maps.event.addListener(controlDiv, “click”, update);            }            var customZoomDiv = document.createElement(“div”);            customZoomDiv.style.position = “relative”;            customZoomDiv.style.width = “36px”;            customZoomDiv.style.height = “36px”;            customZoomDiv.style.zIndex = “100000”;            customZoomDiv.style.backgroundColor = “#FFFFFF”;            customZoomDiv.style.borderRadius = “50%”;            customZoomDiv.style.paddingTop = “2px”;            customZoomDiv.style.textAlign = “center”;            customZoomDiv.innerHTML =              ‘img style=”width:32px;height:32px;” src=”https://res.o2o.cn/img/4a304d2170174a909fede4a3880931f8.png” /’;            //获取控件接口设置控件            var customZoomControl = new CustomZoomControl(customZoomDiv, map);            //将控件添加到controls栈            map.controls[qq.maps.ControlPosition.RIGHT_BOTTOM].push(              customZoomDiv            );            // ————-            that.exchangeAddress(lat, lng);          }, 1000);        }      });    }, 1000);  },  methods: {    searchAddress(e, needmove) {      if (!needmove) {        ismove = true;      }      geocoder.getLocation(e.detail.value);      var region = new qq.maps.LatLng(clat, clng);      searchService.searchNearBy(e.detail.value, region, 2000);    },    chooseAddress(index, lat, lng) {      var that = this;      if (that.lastChoose != -1) {        that.list[that.lastChoose].ischeck = false;      }      that.lastChoose = index;      that.$nextTick(function() {        that.list[index].ischeck = true;        qq.maps.event.removeListener(event);        map.panTo(new qq.maps.LatLng(lat, lng));        event = qq.maps.event.addListener(map, “center_changed”, function() {          that.exchangeAddress(map.getCenter().lat, map.getCenter().lng);        });      });    },    chooseOK() {      var that = this;      bus.emit(“chooseLatLng”, {        lat: that.list[this.lastChoose].latLng.lat,        lng: that.list[this.lastChoose].latLng.lng      });      that.chooseFail();    },    chooseFail() {      wx.navigateBack();    },    exchangeAddress(lat, lng) {      var that = this;      that.lastChoose = -1;      axios({        method: “GET”,        url:          API_PROXY +          encodeURIComponent(            “https://apis.map.qq.com/ws/geocoder/v1/?location=” +              that.reservedDecimal(lat, 4) +              “,” +              that.reservedDecimal(lng, 4) +              “&key=IYOBZ-YVZ3F-VBRJX-JKD3E-3ZB65-QQF7A&get_poi=1”          ),        headers: {          “Content-Type”: “application/x-www-form-urlencoded”        },        responseType: “json” // ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’   json是默认的      })        .then(function(res) {          that.searchAddress(            {              detail: { value: res.data.result.formatted_addresses.recommend }            },            false          );        })        .catch(function(res) {          console.error(“error”);        });    },    reservedDecimal: function(val, digit) {      return Number(val).toFixed(digit);    }  }  // beforeRouteEnter(to, from, next) {  //   // …所有进入此页面的父页面都需要缓存  //   from.meta.keepalive = true;  //   next();  // }};/script 具体效果如下

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » web实现小程序chooseLocationapi(使用腾讯地图,使用微信jssdk)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏