一、展示效果
二、引入地图
1.申请开发者密钥（key）：申请密钥
2.开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3.下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 、 JavaScriptSDK v1.2
4.安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
5.小程序官方示例：
// 引入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);
}
});
}
})
三、具体代码：
<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>