1. Display effect
2. Import the map
1. Apply for a developer key (key): apply for a key
2. Open webserviceAPI service: Console -> Application Management -> My Application -> Add Key -> Check WebServiceAPI -> Save
(The applet SDK needs to use some services of webserviceAPI, so the KEY to use this function needs to have corresponding permissions)
3. Download WeChat Mini Program JavaScriptSDK, WeChat Mini Program JavaScriptSDK v1.1 , JavaScriptSDK v1.2
4. Security domain name setting, set the request legal domain name in the applet management background -> development -> development management -> development settings -> "server domain name", add https://apis.map.qq.com
5. Official example of Mini Program:
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
});
},
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: '酒店',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})
3. Specific code:
<template>
<view class="map_con">
<!-- 地图 -->
<view class="map">
<map id="map" :longitude="mapMarker.coordinate.lng||'115.7'" :latitude="mapMarker.coordinate.lat||'39.4'" :scale="scale" :markers="covers" @markertap="markertap"></map>
</view>
<!-- 城市信息 -->
<view class="city_mation" v-show="cityShow">
<view class="mation_close" @click="closeFun"></view>
<view class="mation_add">
<view class="mation_name">{
{mapMarker.name}}</view>
<view class="mation_dz">
<view class="">{
{mapMarker.address}}</view>
<image src="../../static/imgs/[email protected]" mode=""></image>
</view>
<view class="mation_dz">
<view class="">{
{mapMarker.phone}}</view>
<image src="../../static/imgs/[email protected]" mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script>
import qqmapwx from '../../plugins/qqmap-wx-jssdk.js';
export default {
data() {
return {
cityShow:false,
longitude:'',//中心经度
latitude:'',//中心纬度
scale:4,
covers: [],
points:[],
mapMarker:{
},
}
},
onShow() {
this.allmapFun()
},
onLoad() {
const qqmapsdk = new qqmapwx({
// 使用你在腾讯地图应用生成的key
key: '*******************'
});
this.provinceFun()
this.cityFun()
},
methods: {
allmapFun(){
var that = this;
var arry = [];
this.$api.appPlateForm('POST', 'wx_outlets/index','', function(res) {
if (res.code == 200) {
res.data.forEach((item,index)=>{
//js遍历数组
item.width = 21;
item.height = 26;
item.latitude = item.coordinate.lat;
item.longitude = item.coordinate.lng;
var obj = {
};
obj.latitude = item.coordinate.lat;
obj.longitude = item.coordinate.lng;
arry.push(obj)
});
that.covers = res.data;
let MapContext = uni.createMapContext('map', this);
that.points = arry;
MapContext.includePoints({
points:that.points,
//被你发现了,可以设置上右下左的间距(px).不其实只能用第一个值100.
padding:[20,20,20,20],
success: function (e) {
console.log(e)
}
})
console.log(that.points)
}
}, function(err) {
uni.showToast({
icon: 'none',
title: err.msg
})
});
},
//地图初始化
markertap(e){
console.log("标记点",e.detail.markerId)
this.covers.forEach(item=>{
if(e.detail.markerId == item.id){
this.mapMarker = item;
}
})
this.scale = 16;
// 服务点的id
this.cityShow = true;
},
//关闭信息弹窗
closeFun(){
this.cityShow = false;
},
}
}
</script>
<style scoped>
.map_con{
width: 100%;
height: 100vh;
position: relative;
}
.map_con map{
width: 100%;
height: 100vh;
}
.mation_close{
width: 40rpx;
height: 40rpx;
background-image: url(../../static/imgs/[email protected]);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 9rpx;
right: 9rpx;
}
.mation_add{
width: 100%;
height: auto;
overflow: hidden;
padding: 40rpx;
box-sizing: border-box;
}
.mation_name{
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.mation_dz{
display: flex;
width: 100%;
height: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18rpx
}
.mation_dz:nth-child(2){
margin-top:40rpx;
}
.mation_dz view:first-child{
width: 88%;
height: auto;
overflow: hidden;
}
.mation_dz view{
font-size: 24rpx;
color: #999999;
}
.mation_dz image{
width: 40rpx;
height: 40rpx;
}
.searchBox{
width: 690rpx;
height: auto;
overflow: hidden;
background-color: #fff;
padding: 30rpx 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
margin-top: 9rpx;
box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(120,120,120,0.23);
}
.storeaddress{
width: 100%;
height: 100%;
overflow: hidden;
margin-bottom: 10rpx;
}
.storeaddress view:first-child{
font-size: 26rpx;
font-weight: bold;
color: #333333;
}
.storeaddress view:nth-child(2){
font-size: 22rpx;
font-weight: 400;
color: #333333;
}
</style>