首先项目为单页面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具体效果如下
