最终效果
一、要实现的功能
-
展示地图。
- 参考
map组件
- 参考
-
在地图上展示多个店铺。
marker标记点用于在地图上显示标记的位置。
-
点击店铺放大图标，展示选择的店铺信息。
- 更改选择店铺的标记尺寸大小。
-
在地图中心点放一个可视化标记。
cover-view标签放置一个标记图片，定位到在地图大小的中心，自行调试。
-
移动后获取地图中心点位置，选择最近一个店铺。
map的bindregionchange事件，视野发生变化时触发，重新请求，把最近一家店铺修改标记尺寸大小（有注意事项）。
-
移动后根据屏幕中心点坐标逆地址解析成中文地址（详细看第四）。
-
增加选择其他城市页面（封装成组件了，点击这里查看）。
-
点击其他城市，根据城市名称地址解析成坐标，更新视图（详细看第四）。
二、注意事项
- 每次更新视图都会触发
bindregionchange事件，如果在里面获取到地图视图中心点坐标重新赋值给地图坐标的话，会造成这个事件不断的触发。 - 每次拖动视图中心点位置都需要重新请求坐标附近的店铺。注意封装方法
- 展示在地图上的标签必须用
cover-view或者cover-image
三、涉及到的技术及链接
- 小程序的
map组件 - 腾讯地图的微信小程序javaScript SDK，地址的解析(中文地址转坐标)和逆地址解析(坐标转中文地址)
四、腾讯地图的微信小程序javaScript SDK 使用
使用方式直接去看官方文档，引入也非常详细了。直接把下载js文件，然后引入。不改成了es6的expost default/import来导出引入
export default QQMapWX
然后在使用页面import，在onLoad里实例化api核心类。
//index.vue
import QQMapWX from "@/utils/qqmap-wx-jssdk"; //腾讯地图，reverseGeocoder逆地址转码
export default {
data(){
return {
qqmapsdk: null, //实例化地图sdk
}
},
onLoad(){
// 实例化API核心类
this.qqmapsdk = new QQMapWX({
key: "3P2BZ-6G***-C***3-***5G-3VDYH-N5BGH" // 必填
});
}
}
根据坐标逆解析详细地址
//根据坐标逆解析详细地址
getCityinfo() {
return new Promise((resolved, rejected) => {
const that = this;
this.qqmapsdk.reverseGeocoder({
location: {
latitude: this.latitude,
longitude: this.longitude
},
success(res) {
console.log("地址转码成功", res);
const _res = res.result;
that.cityName = _res.address_component.city;
that.update({
cityName: _res.address_component.city,
nowPlace:
_res.formatted_addresses.recommend + " - " + _res.address
});
that.getShopData();
},
fail: function(res) {
console.log(res);
}
});
});
},
根据城市/地址解析成坐标
//根据城市/地址解析成坐标
cityNameGetPosition() {
return new Promise((resolved, rejected) => {
const that = this;
this.qqmapsdk.geocoder({
address: this.cityName,
success(res) {
console.log("根据地址转换坐标", res);
const _res = res.result.location;
that.latitude = _res.lat;
that.longitude = _res.lng;
that.update({
latitude: _res.lat,
longitude: _res.lng
});
that.getCityinfo();
},
fail(err) {
console.log("根据地址转换坐标err", err);
}
});
});
},
五、实现的部分代码
使用的请求和功能逻辑应该是这样的，做了个思维导图。 (注意：代码跟思维导图可能有出入，图是完成代码后的总结，是比较完善的)
这个项目开发使用的是mpvue开发的小程序，mpvue里bindregionchange事件变成了
//不是mpvue开发请无视
@regionchange="getCenterMap1"
@end="getCenterMap"
map组件
<div>
<!-- 地图组件 -->
<map
id="map"
:longitude="longitude"
:latitude="latitude"
scale="13"
:markers="markers"
@markertap="markertap"
@regionchange="getCenterMap1"
@end="getCenterMap"
show-location
style="width:750rpx; height:99vh;"
>
</map>
<!-- 中心点 -->
<cover-image class="centerImg"
src="/static/images/person.png"
></cover-image>
<!-- 回到我的定位 -->
<cover-image
@click="getMyPosition"
class="backMyPosition"
src="/static/images/location.png"
></cover-image>
</div>
获取自身定位wx.getLocation
// 获取定位
getMyPosition() {
return new Promise((resolved, rejected) => {
wx.getLocation({
type: "wgs84",
success: data => {
// console.log(data,"微信地图")
this.latitude = data.latitude;
this.longitude = data.longitude;
this.$store.commit("update", {
latitude: data.latitude,
longitude: data.longitude
});
// 根据坐标获取城市信息
this.getCityinfo().then(() => {
resolved();
});
},
fail() {
//失败回调
//如果用户拒绝授权,默认为北京
this.cityName = "北京市";
this.update({ cityName: "北京市" });
}
});
});
},
地图视野更新时触发
// 地图视野更新时触发
getCenterMap() {
if (this.active === "上门") {
const that = this;
console.log("自身位置坐标", this.longitude, this.latitude);
const map = wx.createMapContext("map");
map.getCenterLocation({
success(res) {
// 判断坐标一致，不用重复请求数据
if (
that.longitude === res.longitude &&
that.latitude === res.latitude
) {
return false;
}
// const ress = transformFromGCJToWGS(res.latitude,res.longitude)
that.latitude = res.latitude;
that.longitude = res.longitude;
that.$store.commit("update", {
latitude: res.latitude,
longitude: res.longitude
});
console.log("中心位置坐标", that.longitude, that.latitude);
// console.log('转换后的中心位置坐标',ress)
that.getCityinfo();
}
});
}
}
