小程序中打开地图选择店铺位置，地图定位选择地点实现方法如下，（仿美团外卖商家入驻店铺地址选择页面制作）
源码地址：
CSDN:
github: https://github.com/mcky1928/map
小程序地图实现，功能如下：
1. 默认地位显示地图，下面显示附近场所
2. 可输入搜索关键词，匹配地点
3. 点击地区，重新选择省市区
4. 拖动地图自动匹配选择中心位置
5. 可重新定位
效果图片如下：
代码如下：
1. shopMap.wxml
<!--pages/shopMap/shopMap.wxml-->
<!--绑定点击事件-->
<!--绑定输入事件-->
<view wx:if="{{addListShow}}">
<view class="top">
<view class="back iconfont icon-fanhui" bindtap="back1"></view>
<view class="search-box {{addListShow?'search-box1':''}}">
<view class="region" bindtap="chooseCity">{{currentRegion.district}}</view>
<view class="shu"></view>
<input bindinput="getsuggest" placeholder="请输入您的店铺地址"></input>
</view>
</view>
<!--关键词输入提示列表渲染-->
<view class="add-list-box">
<scroll-view class="add-list" scroll-y>
<view class="add-item" wx:for="{{suggestion}}" wx:key="index">
<!--绑定回填事件-->
<view bindtap="backfill" id="{{index}}" data-name="{{item.title}}">
<!--根据需求渲染相应数据-->
<!--渲染地址title-->
<view class="title">{{item.title}}</view>
<!--渲染详细地址-->
<view class="add">{{item.addr}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view wx:if="{{!addListShow && !chooseCity}}">
<!--地图容器-->
<map id="myMap"
style="width:100%;height:300px;"
longitude="{{longitude}}"
latitude="{{latitude}}" scale="17" bindregionchange="mapChange">
<cover-view class="top">
<cover-view class="back" bindtap="back1">
<cover-image src="../../images/back.png"></cover-image>
</cover-view>
<cover-view class="search-box">
<cover-view class="region" bindtap="chooseCity">{{currentRegion.district}}</cover-view>
<cover-view class="shu"></cover-view>
<cover-view class="placeholder" bindtap="showAddList">请输入您的店铺地址</cover-view>
</cover-view>
</cover-view>
<cover-view class="map-prompt">您可拖动地图, 标记店铺准确位置</cover-view>
<cover-image class="current-site-icon" src="../../images/my_marker.png"></cover-image>
<cover-view class="reload" bindtap="reload">
<cover-view class="center1">
<cover-view class="center2"></cover-view>
</cover-view>
</cover-view>
</map>
<scroll-view class="near-list" scroll-y>
<!--绑定回填事件-->
<view class="near-item" wx:for="{{nearList}}" wx:key="index">
<view class="current-site iconfont icon-location" wx:if="{{index == selectedId }}"></view>
<!--根据需求渲染相应数据-->
<view bindtap="chooseCenter" id="{{index}}" data-name="{{item.title}}">
<!--渲染地址title-->
<view class="title {{ index == selectedId?'title1':'' }}">{{item.title}}</view>
<!--渲染详细地址-->
<view class="add {{ index == selectedId?'add1':'' }}">{{item.addr}}</view>
</view>
</view>
</scroll-view>
<view class="bottom-box">
<button bindtap="selectedOk">确认地址</button>
</view>
</view>
<view class="region-box" wx:if="{{chooseCity}}">
<view class="region-top">
<view class="region-back iconfont icon-fanhui" bindtap="back2"></view>
<view class="title">选择城市</view>
</view>
<view class="region-tabs">
<text class="tab" bindtap="showProvince">{{currentProvince}}</text>
<text class="tab" bindtap="showCity" wx:if="{{!regionShow.province}}" bindtap="showCity">{{currentCity}}</text>
<text class="tab" bindtap="showDistrict" wx:if="{{regionShow.district}}" bindtap="showDistrict">{{currentDistrict}}</text>
</view>
<scroll-view scroll-y style="height:1050rpx;">
<view class="region-list" wx:if="{{regionShow.province}}">
<view class="region-item" wx:for="{{regionData.province}}" wx:key="index">
<view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectProvince">
<text>{{item.fullname}}</text>
</view>
</view>
</view>
<view class="region-list" wx:if="{{regionShow.city}}">
<view class="region-item" wx:for="{{regionData.city}}" wx:key="index">
<view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectCity">
<text>{{item.fullname}}</text>
</view>
</view>
</view>
<view class="region-list" wx:if="{{regionShow.district}}">
<view class="region-item" wx:for="{{regionData.district}}" wx:key="index">
<view data-id="{{item.id}}" data-name="{{item.fullname}}" data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}" bindtap="selectDistrict">
<text>{{item.fullname}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
2. shopMap.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
data: {
addListShow: false,
chooseCity: false,
regionShow: {
province: false,
city: false,
district: true
},
regionData: {},
currentRegion: {
province: '选择城市',
city: '选择城市',
district: '选择城市',
},
currentProvince: '选择城市',
currentCity: '选择城市',
currentDistrict: '选择城市',
latitude: '',
longitude: '',
centerData: {},
nearList: [],
suggestion: [],
selectedId: 0,
defaultKeyword: '房产小区',
keyword: ''
},
onLoad: function () {
let self =this;
self.mapCtx = wx.createMapContext('myMap')
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'W57BZ-JDB6X-XPA4H-Z76MI-73FF2-24BT4'
});
wx.showLoading({
title: '加载中'
});
//定位
wx.getLocation({
type: 'wgs84',
success(res) {
//console.log(res)
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
//你地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
//console.log(res)
self.setData({
latitude: latitude,
longitude: longitude,
currentRegion: res.result.address_component,
keyword: self.data.defaultKeyword
})
// 调用接口
self.nearby_search();
},
});
},
fail(err) {
//console.log(err)
wx.hideLoading({});
wx.showToast({
title: '定位失败',
icon: 'none',
duration: 1500
})
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 1500)
}
})
},
onReady: function () {
},
//监听拖动地图，拖动结束根据中心点更新页面
mapChange: function (e) {
let self = this;
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
self.mapCtx.getCenterLocation({
success: function (res) {
//console.log(res)
self.setData({
nearList:[],
latitude: res.latitude,
longitude: res.longitude,
})
self.nearby_search();
}
})
}
},
//重新定位
reload: function () {
this.onLoad();
},
//整理目前选择省市区的省市区列表
getRegionData: function () {
let self = this;
//调用获取城市列表接口
qqmapsdk.getCityList({
success: function (res) {//成功后的回调
//console.log(res)
let provinceArr = res.result[0];
let cityArr = [];
let districtArr = [];
for (var i = 0; i < provinceArr.length; i++) {
var name = provinceArr[i].fullname;
if (self.data.currentRegion.province == name) {
if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
cityArr.push(provinceArr[i])
} else {
qqmapsdk.getDistrictByCityId({
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
id: provinceArr[i].id,
success: function (res) {//成功后的回调
//console.log(res);
cityArr = res.result[0];
self.setData({
regionData: {
province: provinceArr,
city: cityArr,
district: districtArr
}
})
},
fail: function (error) {
//console.error(error);
},
complete: function (res) {
//console.log(res);
}
});
}
}
}
for (var i = 0; i < res.result[1].length; i++) {
var name = res.result[1][i].fullname;
if (self.data.currentRegion.city == name) {
qqmapsdk.getDistrictByCityId({
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
id: res.result[1][i].id,
success: function (res) {//成功后的回调
//console.log(res);
districtArr = res.result[0];
self.setData({
regionData: {
province: provinceArr,
city: cityArr,
district: districtArr
}
})
},
fail: function (error) {
//console.error(error);
},
complete: function (res) {
//console.log(res);
}
});
}
}
},
fail: function (error) {
//console.error(error);
},
complete: function (res) {
//console.log(res);
}
});
},
onShow: function () {
let self = this;
},
//地图标记点
addMarker: function (data) {
//console.log(data)
//console.log(data.title)
var mks = [];
mks.push({ // 获取返回结果，放到mks数组中
title: data.title,
id: data.id,
addr: data.addr,
province: data.province,
city: data.city,
district: data.district,
latitude: data.latitude,
longitude: data.longitude,
iconPath: "/images/my_marker.png", //图标路径
width: 25,
height: 25
})
this.setData({ //设置markers属性，将搜索结果显示在地图中
markers: mks,
currentRegion: {
province: data.province,
city: data.city,
district: data.district,
}
})
wx.hideLoading({});
},
//点击选择搜索结果
backfill: function (e) {
var id = e.currentTarget.id;
let name = e.currentTarget.dataset.name;
for (var i = 0; i < this.data.suggestion.length; i++) {
if (i == id) {
//console.log(this.data.suggestion[i])
this.setData({
centerData: this.data.suggestion[i],
addListShow: false,
latitude: this.data.suggestion[i].latitude,
longitude: this.data.suggestion[i].longitude
});
this.nearby_search();
return;
//console.log(this.data.centerData)
}
}
},
//点击选择地图下方列表某项
chooseCenter: function (e) {
var id = e.currentTarget.id;
let name = e.currentTarget.dataset.name;
for (var i = 0; i < this.data.nearList.length; i++) {
if (i == id) {
this.setData({
selectedId: id,
centerData: this.data.nearList[i],
latitude: this.data.nearList[i].latitude,
longitude: this.data.nearList[i].longitude,
});
this.addMarker(this.data.nearList[id]);
return;
//console.log(this.data.centerData)
}
}
},
//显示搜索列表
showAddList: function () {
this.setData({
addListShow: true
})
},
// 根据关键词搜索附近位置
nearby_search: function () {
var self = this;
wx.hideLoading();
wx.showLoading({
title: '加载中'
});
// 调用接口
qqmapsdk.search({
keyword: self.data.keyword, //搜索关键词
//boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
location: self.data.latitude + ',' + self.data.longitude,
page_size: 20,
page_index: 1,
success: function (res) { //搜索成功后的回调
//console.log(res.data)
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果，放到sug数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
province: res.data[i].ad_info.province,
city: res.data[i].ad_info.city,
district: res.data[i].ad_info.district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
self.setData({
selectedId: 0,
centerData: sug[0],
nearList: sug,
suggestion: sug
})
self.addMarker(sug[0]);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
//console.log(res);
}
});
},
//根据关键词搜索匹配位置
getsuggest: function (e) {
var _this = this;
var keyword = e.detail.value;
_this.setData({
addListShow: true
})
//调用关键词提示接口
qqmapsdk.getSuggestion({
//获取输入框值并设置keyword参数
keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
location: _this.data.latitude + ',' + _this.data.longitude,
page_size: 20,
page_index: 1,
//region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
success: function (res) {//搜索成功后的回调
//console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 获取返回结果，放到sug数组中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
province: res.data[i].province,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
_this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
suggestion: sug,
nearList: sug,
keyword: keyword
});
},
fail: function (error) {
//console.error(error);
},
complete: function (res) {
//console.log(res);
}
});
},
//打开选择省市区页面
chooseCity: function () {
let self = this;
self.getRegionData();
self.setData({
chooseCity: true,
regionShow: {
province: false,
city: false,
district: true
},
currentProvince: self.data.currentRegion.province,
currentCity: self.data.currentRegion.city,
currentDistrict: self.data.currentRegion.district,
})
},
//选择省
showProvince: function () {
this.setData({
regionShow: {
province: true,
city: false,
district: false
}
})
},
//选择城市
showCity: function () {
this.setData({
regionShow: {
province: false,
city: true,
district: false
}
})
},
//选择地区
showDistrict: function () {
this.setData({
regionShow: {
province: false,
city: false,
district: true
}
})
},
//选择省之后操作
selectProvince: function (e) {
//console.log(e)
let self = this;
let id = e.currentTarget.dataset.id;
let name = e.currentTarget.dataset.name;
self.setData({
currentProvince: name,
currentCity: '请选择城市',
})
if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市'){
var provinceArr = self.data.regionData.province;
var cityArr = [];
for (var i = 0; i < provinceArr.length;i++){
if(provinceArr[i].fullname == name){
cityArr.push(provinceArr[i])
self.setData({
regionData: {
province: self.data.regionData.province,
city: cityArr,
district: self.data.regionData.district
}
})
self.showCity();
return;
}
}
}else{
let bj = self.data.regionShow;
self.getById(id, name, bj)
}
},
//选择城市之后操作
selectCity: function (e) {
let self = this;
let id = e.currentTarget.dataset.id;
let name = e.currentTarget.dataset.name;
self.setData({
currentCity: name,
currentDistrict: '请选择城市',
})
let bj = self.data.regionShow;
self.getById(id, name, bj)
},
//选择区县之后操作
selectDistrict: function (e) {
let self = this;
let id = e.currentTarget.dataset.id;
let name = e.currentTarget.dataset.name;
let latitude = e.currentTarget.dataset.latitude;
let longitude = e.currentTarget.dataset.longitude;
self.setData({
currentDistrict: name,
latitude: latitude,
longitude: longitude,
currentRegion: {
province: self.data.currentProvince,
city: self.data.currentCity,
district: name
},
chooseCity: false,
keyword: self.data.defaultKeyword
})
self.nearby_search();
},
//根据选择省市加载市区列表
getById: function (id,name,bj) {
let self = this;
qqmapsdk.getDistrictByCityId({
// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
success: function (res) {//成功后的回调
//console.log(res);
if(bj.province){
self.setData({
regionData: {
province: self.data.regionData.province,
city: res.result[0],
district: self.data.regionData.district
}
})
self.showCity();
} else if (bj.city) {
self.setData({
regionData: {
province: self.data.regionData.province,
city: self.data.regionData.city,
district: res.result[0]
}
})
self.showDistrict();
} else {
self.setData({
chooseCity: false,
})
}
},
fail: function (error) {
//console.error(error);
},
complete: function (res) {
//console.log(res);
}
});
},
//返回上一页或关闭搜索页面
back1: function () {
if (this.data.addListShow) {
this.setData({
addListShow: false
})
}else {
wx.navigateBack({
delta: 1
})
}
},
//关闭选择省市区页面
back2: function () {
this.setData({
chooseCity: false
})
},
//确认选择地址
selectedOk: function () {
let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
let prevPage = pages[pages.length - 2];
//console.log(this.data.centerData)
prevPage.setData({
storeAddress: this.data.centerData.title
})
wx.navigateBack({
delta: 1
})
}
})
3. shopMap.wxss
/* pages/shopMap/shopMap.wxss */
@import "../../lib/css/iconfont.wxss";
.top {
width: 100%;
height: 80rpx;
line-height: 80rpx;
position: fixed;
top: 0;
left: 0;
padding: 30rpx 20rpx;
z-index: 999;
overflow: hidden;
}
.back {
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
color: #666;
text-align: center;
background: rgb(255,255,255);
font-size: 50rpx;
border-radius: 50%;
float: left;
}
.back cover-image{
width: 50rpx;
height: 50rpx;
display: inline-block;
margin-top: 15rpx;
}
.search-box {
width: 610rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
background: rgb(255,255,255);
margin-left: 20rpx;
float: left;
overflow: hidden;
}
.search-box1 {
border: 1px solid #ccc;
border-radius: 10rpx;
background: #eee;
}
.search-box .region {
width: 199rpx;
line-height: 80rpx;
font-size: 30rpx;
color: #282828;
text-align: center;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-box .shu {
width: 1rpx;
height: 80rpx;
background:#ccc;
float: left;
}
.search-box input {
width: 380rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
color: #282828;
padding: 10rpx 20rpx;
box-sizing: border-box;
float: left;
}
.search-box .placeholder{
width: 380rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
color: #ccc;
padding: 0 20rpx;
box-sizing: border-box;
float: left;
}
.add-list-box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 998;
padding-top: 150rpx;
background: #fff;
box-sizing: border-box;
overflow: hidden;
}
.add-list {
width: 100%;
height: 1000rpx;
}
.add-item {
line-height: 40rpx;
padding: 30rpx 50rpx;
text-align: left;
border-top: 1px solid #eee;
}
.add-item .title {
color: #282828;
font-size: 32rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.add-item .add {
color: #707070;
font-size: 24rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.current-site-icon {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.near-list {
height: 650rpx;
padding-bottom: 100rpx;
box-sizing: border-box;
}
.near-item {
line-height: 40rpx;
padding: 30rpx 50rpx 30rpx 90rpx;
text-align: left;
border-bottom: 1px solid #eee;
position: relative;
}
.current-site {
font-size: 40rpx;
color: #3095F9;
position: absolute;
top: 40rpx;
left: 30rpx;
}
.near-item .title {
color: #282828;
font-size: 32rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.near-item .add {
color: #707070;
font-size: 24rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.near-item .title1 {
color: #3095F9;
}
.near-item .add1 {
color: #3095F9;
}
.bottom-box {
width: 100%;
padding: 20rpx;
background: #fff;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
z-index: 88;
overflow: hidden;
}
.bottom-box button{
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: none;
background: #3095F9;
color: #fff;
font-size: 36rpx;
}
.region-box {
width: 100%;
height: 100%;
background: #FFF;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
}
.region-box .region-top {
position: relative;
font-size: 40rpx;
color: #282828;
font-weight: bold;
line-height: 100rpx;
text-align: center;
}
.region-box .region-back {
width: 80rpx;
height: 80rpx;
font-size: 50rpx;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.region-box .region-tabs{
line-height: 60rpx;
font-size: 20rpx;
}
.region-tabs .tab {
min-width: 100rpx;
max-width: 200rpx;
line-height: 40rpx;
font-size: 20rpx;
color: #3095F9;
text-align: center;
border: 1rpx solid #3095F9;
border-radius: 20rpx;
display: inline-block;
margin: 20rpx 0 20rpx 20rpx;
padding: 3rpx 20rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.region-list .region-item{
font-size: 30rpx;
color: #282828;
line-height: 80rpx;
padding: 10rpx 30rpx;
border-top: 1rpx solid #eee;
}
.map-prompt {
width: 420rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 24rpx;
color: #707070;
text-align: center;
background: #fff;
border-radius: 10rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translate(-50%,0);
}
.reload {
width: 80rpx;
height: 80rpx;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 30rpx;
right: 30rpx;
}
.reload .center1 {
width: 30rpx;
height: 30rpx;
border: 1rpx solid #3095F9;
border-radius: 50%;
margin: 24rpx auto;
}
.reload .center2 {
width: 25rpx;
height: 25rpx;
background: #3095F9;
border-radius: 50%;
margin: 3rpx auto;
}
4. 引用的阿里图标 iconfont.wxss
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999'); /* IE9 */
src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/font_1120834_hvoztl864h6.woff?t=1554258412999') format('woff'),
url('//at.alicdn.com/t/font_1120834_hvoztl864h6.ttf?t=1554258412999') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1120834_hvoztl864h6.svg?t=1554258412999#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-iconfontzhizuobiaozhun16:before {
content: "\e60f";
}
.icon-location:before {
content: "\e619";
}
.icon-dayuhao:before {
content: "\e600";
}
.icon-jizuobiaotu:before {
content: "\e613";
}
.icon-dayuhao1:before {
content: "\e65c";
}
.icon-zuobiao:before {
content: "\e657";
}
.icon-zhengque:before {
content: "\e64a";
}
.icon-fanhui:before {
content: "\e60d";
}
.icon-iconfront-:before {
content: "\e620";
}
5. 用到的图片
注：
实际开发中，腾讯地图api的key 和引用的阿里图标库建议改成自己的。
代码写的比较乱，还没有整理，使用的话可以整理一下。
搜索附近位置的关键字设置可参考 WebService API | 腾讯位置服务
