【uniapp开发小程序之地图展示】地图位置、地图选点展示效果

一、展示效果

二、引入地图

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/icon_addres2s@2x.png" mode=""></image>
				</view>
				<view class="mation_dz">
					<view class="">{{mapMarker.phone}}</view>
					<image src="../../static/imgs/icon_tel@2x.png" 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/close@2x.png);
		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>

ending~