appid获取：
测试号：在微信开发者工具内点击“导入”随便选一个空文件夹 然后 点击测试号就能看到自己的appId了
在微信公众开发平台内获取：获取小程序appid
需要地图授权的key：
腾讯地图Key获取，创建一个应用添加一个key就行，然后在样式应用内给刚刚创建的key设置绑定样式。
添加key
设置绑定样式
功能实现（有appid和绑定了地图key 直接跳转到这一步）：
<template>
<view>
<map id="map" class="map_style" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale"
layer-style="1" :markers="markers" @tap="handleGetLongitudeLatitude" @markertap="handleClickMarker">
<!-- 定位、缩进按钮 -->
<cover-view class="cover-view">
<cover-view class="cover-view-image cover-view-image-position" @click="handleCurrenPosition">
<cover-image class="cover-image cover-image-position" src="@/static/position.png"></cover-image>
<cover-view style="font-size: 10px;">
定位
</cover-view>
</cover-view>
<cover-view class="cover-view-image-scale">
<cover-view class="cover-view-image" @click="handleClickEnlarge">
<cover-image class="cover-image cover-image-enlarge" src="@/static/enlarge.png"></cover-image>
</cover-view>
<cover-view class="cover-view-image " @click="handleClickShrink">
<cover-image class="cover-image cover-image-shrink" src="@/static/shrink.png"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
import QQMap from '@/lib/qqmap-wx-jssdk.min.js';
const key = "WY7BZ-RRY3J-LP5FX-XGWY3-RC2TF-HOFQZ";
const marksSetting = {
alpha: 0.8, //标注的透明度
width: 25, //标注的宽度
height: 36, //标注的高度
calloutSetting: {
color: "#FFFFFF", // 文本颜色
fontSize: 14, // 文本字体大小
borderRadius: 10, // 边框圆角
borderColor: "#aaff00", //气泡边框颜色
borderWidth:2, //边框宽度
bgColor: "#ffc45e", //气泡背景颜色
padding: 5, //文本边距
display: "ALWAYS", //'BYCLICK':点击显示（我是没试出效果）; 'ALWAYS':常显
textAlign: "center", //文本对齐方式 有效值：left、center、right
anchorX: 0, //横向偏移量 向右为正数 ，气泡以标注上方为中心，正数向右偏移 负数向左偏移
anchorY: 0, //纵向偏移量 向下为正数，气泡以标注上方为中心，正数向下偏移 负数向上偏移
}
};
export default {
data() {
return {
longitude: "",
latitude: "",
address: "",
scale: 15,
markers: [
{
id: 1,
longitude: 114.34707328259367, //经度
latitude: 30.500969242060897, //纬度
alpha: marksSetting.alpha, //标注的透明度 0~1之间
width: marksSetting.width, //标注的宽度
height: marksSetting.height, //标注的高度
callout: {
content: "丽岛花园",
color: marksSetting.calloutSetting.color,
fontSize: marksSetting.calloutSetting.fontSize,
borderRadius: marksSetting.calloutSetting.borderRadius,
borderWidth: marksSetting.calloutSetting.borderWidth,
borderColor: marksSetting.calloutSetting.borderColor,
bgColor: marksSetting.calloutSetting.bgColor,
padding: marksSetting.calloutSetting.padding,
display: marksSetting.calloutSetting.display,
textAlign: marksSetting.calloutSetting.textAlign,
anchorX: marksSetting.calloutSetting.anchorX,
anchorY: marksSetting.calloutSetting.anchorY,
},
},
{
id: 2,
longitude: 114.3406549588575,//经度
latitude: 30.499375611479607,//纬度
alpha: marksSetting.alpha, //标注的透明度 0~1之间
width: marksSetting.width, //标注的宽度
height: marksSetting.height, //标注的高度
callout: {
content: "南湖雅苑",
color: marksSetting.calloutSetting.color,
fontSize: marksSetting.calloutSetting.fontSize,
borderRadius: marksSetting.calloutSetting.borderRadius,
borderWidth: marksSetting.calloutSetting.borderWidth,
borderColor: marksSetting.calloutSetting.borderColor,
bgColor: marksSetting.calloutSetting.bgColor,
padding: marksSetting.calloutSetting.padding,
display: marksSetting.calloutSetting.display,
textAlign: marksSetting.calloutSetting.textAlign,
anchorX: marksSetting.calloutSetting.anchorX,
anchorY: marksSetting.calloutSetting.anchorY,
},
},
],
}
},
onShow() {
const that = this;
uni.getLocation({
type: 'wgs84',
success: function(res) {
that.longitude = res.longitude;
that.latitude = res.latitude;
that.handleGetAddress();
}
});
},
methods: {
/**
* @param {Object} val 返回点击地图地点的经纬度
*/
handleGetLongitudeLatitude(param) {
console.log("被点击地点的纬度：",param.detail.latitude);
console.log("被点击地点的经度：",param.detail.longitude);
},
/**
* @param {Object} longitude 经度
* @param {Object} latitude 纬度
*/
handleGetAddress(longitude, latitude) {
const that = this;
const map = new QQMap({
key
});
map.reverseGeocoder({
location: {
longitude: this.longitude,
latitude: this.latitude
},
success: function(res) {
that.address = res.result.address;
}
})
},
handleClickMarker(param){
this.markers.forEach((item)=>{
if(item.id == param.markerId){
item.callout.borderColor="#ffff7f"
item.callout.bgColor="#ffa6b2"
}
})
},
handleCurrenPosition() {
const that = this;
uni.createMapContext("map", this).moveToLocation({
longitude: that.longitude,
latitude: that.latitude
})
},
handleClickEnlarge() {
this.scale = this.scale == 20 ? this.scale : ++this.scale;
},
handleClickShrink() {
this.scale = this.scale > 3 ? --this.scale : 3;
}
}
}
</script>
<style>
@import "./index.css";
</style> .map_style {
width: 750rpx;
height: 100vh;
}
/* 外层盒子样式 */
.cover-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80rpx;
color: #484848;
background-size: 120rpx 120rpx;
background-position: center center;
position: absolute;
bottom: 15vh;
right: 32rpx;
}
/* 定位、扩大、缩小按钮盒子样式 */
.cover-view-image {
background: #ffffff;
width: 80rpx;
height: 40px;
margin: 0 auto;
text-align: center;
}
/* 定位盒子额外样式 */
.cover-view-image-position {
border-radius: 5px;
}
/* 扩大缩小定位额外样式 */
.cover-view-image-scale {
margin-top: 20px;
border-radius: 5px;
}
/* 图标大小 */
.cover-image {
width: 40rpx;
height: 40rpx;
margin-left: 10px;
}
/* 定位图标额外样式 */
.cover-image-position {
margin-top: 3px;
}
/* 缩小图标额外样式 */
.cover-image-shrink {
margin-top: 9px;
}
/* 扩大图标额外样式 */
.cover-image-enlarge {
margin-top: 9px;
}
.top-search {
position: sticky;
top: var(--window-top);
/* // top: 0; // 这个试了也可以达到吸顶效果 */
z-index: 100;
}
.search-box {
display: flex;
align-items: center;
padding-top: 16rpx;
padding-bottom: 16rpx;
}
效果展示：
