需求:微信小程序使用腾讯地图，做地点搜索！（完整版）

需求:微信小程序使用腾讯地图，做地点搜索！（完整版）

先来看看我需要的效果吧！

话不多说，开始吧！
既然是腾讯地图，就要打开腾讯地图开放平台参考哦，放个链接：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
然后自己整理样式：下面是我的全部代码，仅供参考

<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>

好了，到这里代码就结束啦（记录一下），希望对您有帮助哦~