需求:微信小程序使用腾讯地图，做地点搜索！（完整版）
先来看看我需要的效果吧！
话不多说，开始吧！
既然是腾讯地图，就要打开腾讯地图开放平台参考哦，放个链接：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
第一步：配置微信小程序需要用的key，WebServiceAPI，在微信开发者平台添加合法域名，下载SDKjs放在代码中
注意：上面勾选的都是必填的，要想使用地点搜索，就需要配置授权IP，可以参考文档https://lbs.qq.com/faq/serverFaq/webServiceKey
此时也需要在微信开发者平台中添加合法域名，上链接：https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1503076201&lang=zh_CN
开发者管理—开发设置—服务器域名request添加https://apis.map.qq.com
第二步：接下来就可以写代码了，这里就没什么好说的了，直接参考：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch
然后自己整理样式：下面是我的全部代码，仅供参考文章来源：https://www.toymoban.com/news/detail-764984.html
<template>
<view>
<view class="flex-box flex-col" style="height: 100vh;">
<view class="mapbox flex-grow-1">
<view>
<u-search placeholder="请输入小区地址" :showAction="true" actionText="搜索" shape="square" v-model="inputData"
height="72" @search="search" @custom="custom" @clear="clear"></u-search>
<view class="showBox">
<view class="" v-for="item in searchData" :key='item'>
<view class="item" @click="clickTitle(item.title,item.location)">
{{item.title}}
</view>
</view>
</view>
</view>
<!--地图容器-->
<map id="myMap" :markers="markers" style="width:100%;height:100%;" :longitude=longitude :latitude=latitude
scale='16'>
</map>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
const functions = require('../../utils/functions.js');
let mapCtx = null;
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '4KTBZ-4ILWB-5WJUL-JRJY3-JM2X6-6KBTD' // 必填
});
export default {
data() {
return {
inputData: '',
longitude: 104.06666,
latitude: 30.66667,
markers: [],
markerData: [],
scale: 14,
searchData: [],
};
},
onLoad: function(options) {
let that = this;
},
methods: {
clickTitle(title, location) {
console.log(title);
console.log(location);
if (title, location) {
this.inputData = title
setTimeout(() => {
uni.navigateTo({
url: '/pages/publishRental/publishRental?title=' + title + '&lat=' + location.lat + '&lng=' +
location.lng,
});
}, 3000)
}
},
// change() {
// this.nearby_search()
// },
search() {
this.nearby_search()
},
custom() {
this.nearby_search()
},
clear() {
this.searchData = []
},
// 事件触发，调用接口
nearby_search: function() {
var _this = this;
_this.searchData = []
// 调用接口
qqmapsdk.search({
keyword: _this.inputData, //搜索关键词
location: '30.66667,104.06666', //设置周边搜索中心点
success: function(res) { //搜索成功后的回调
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果，放到mks数组中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/resources/my_marker.png", //图标路径
width: 20,
height: 20
})
}
_this.setData({ //设置markers属性，将搜索结果显示在地图中
markers: mks
})
},
fail: function(res) {
// console.log(res.data);
},
complete: function(res) {
if (res.data) {
res.data.forEach(v => {
_this.searchData.push(v);
_this.latitude = v.location.lat
_this.longitude = v.location.lng
console.log(_this.searchData);
})
}
}
});
}
}
}
</script>
<style lang="less" scoped>
.mapbox {
position: relative;
}
#myMap {
width: 100%;
height: 100%;
position: relative;
z-index: 10;
}
.showBox {
width: 100%;
position: absolute;
z-index: 11;
top: 72rpx;
background-color: rgba(255, 255, 255, .8);
padding: 30rpx;
.item {
margin: 5rpx 0;
font-size: 34rpx;
}
.item:active {
background-color: rgba(157, 157, 157, .8);
}
}
</style>
好了，到这里代码就结束啦（记录一下），希望对您有帮助哦~文章来源地址https://www.toymoban.com/news/detail-764984.html
到了这里，关于需求:微信小程序使用腾讯地图，做地点搜索！（完整版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
