在移动应用开发中,地图功能是非常常见且实用的功能之一。在微信小程序中也可以通过uniapp框架实现地图功能,本文将介绍如何在uniapp中实现微信小程序的地图功能。
1. 获取appid
首先需要在微信开发者工具内获取自己的小程序appid。打开微信开发者工具,在测试号界面点击导入并选择一个空文件夹,然后点击测试号即可查看自己的appid。
另外,还可以在微信公众开发平台内获取小程序appid。
2. 获取地图授权的key
腾讯地图提供了地图服务,为了使用地图功能,我们需要获取地图授权的key。具体步骤如下:
在腾讯地图官网创建一个应用。
添加一个key。
在样式应用内给刚刚创建的key设置绑定样式。
3. 功能实现
在uniapp的页面中,我们可以通过以下代码实现地图功能:
<template> <view> <map id="map" class="map_style" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale" layer-style="1" :markers="markers" @tap="handleGetLongitudeLatitude" @markertap="handleClickMarker"> <!-- 定位、缩进按钮 --> <cover-view class="cover-view"> <cover-view class="cover-view-image cover-view-image-position" @click="handleCurrenPosition"> <cover-image class="cover-image cover-image-position" src="@/static/position.png"></cover-image> <cover-view style="font-size: 10px;"> 定位 </cover-view> </cover-view> <cover-view class="cover-view-image-scale"> <cover-view class="cover-view-image" @click="handleClickEnlarge"> <cover-image class="cover-image cover-image-enlarge" src="@/static/enlarge.png"></cover-image> </cover-view> <cover-view class="cover-view-image " @click="handleClickShrink"> <cover-image class="cover-image cover-image-shrink" src="@/static/shrink.png"></cover-image> </cover-view> </cover-view> </cover-view> </map> </view> </template> <script> import QQMap from '@/lib/qqmap-wx-jssdk.min.js'; const key = "WY7BZ-RRY3J-LP5FX-XGWY3-RC2TF-HOFQZ"; // 标注设置 const marksSetting = { alpha: 0.8, //标注的透明度 width: 25, //标注的宽度 height: 36, //标注的高度 calloutSetting: { color: "#FFFFFF", // 文本颜色 fontSize: 14, // 文本字体大小 borderRadius: 10, // 边框圆角 borderColor: "#aaff00", //气泡边框颜色 borderWidth:2, //边框宽度 bgColor: "#ffc45e", //气泡背景颜色 padding: 5, //文本边距 display: "ALWAYS", //'BYCLICK':点击显示(我是没试出效果); 'ALWAYS':常显 textAlign: "center", //文本对齐方式 有效值:left、center、right anchorX: 0, //横向偏移动位置,标准:0-1,0表示左边缘,1表示右边缘。 anchorY: 1 //竖向偏移,标准:0-1,0表示顶边缘,1表示底边缘。 } }; export default { data() { return { latitude: 0, //地图纬度 longitude: 0, //地图经度 scale: 16, //地图缩放级别 markers: [], //标记点集合 } }, mounted() { this.initMap(); }, methods: { initMap() { // 实例化qqmap this.qqmapsdk = new QQMap({ key: key }); // 获取当前位置坐标 uni.getLocation({ type: 'gcj02', //返回可以用于uni.openLocation的经纬度 success: res => { this.latitude = res.latitude; this.longitude = res.longitude; this.getMarkers(res.latitude, res.longitude); } }); }, getMarkers(latitude, longitude) { // 调用接口获取附近的标记点 this.qqmapsdk.search({ keyword: '餐厅', location: `${latitude},${longitude}`, success: result => { const markers = result.data.map(item => ({ ...item, iconPath: '/static/marker.png', //标注图片路径 width: marksSetting.width, height: marksSetting.height, alpha: marksSetting.alpha, callout: { content: item.title, color: marksSetting.calloutSetting.color, fontSize: marksSetting.calloutSetting.fontSize, borderRadius: marksSetting.calloutSetting.borderRadius, borderColor: marksSetting.calloutSetting.borderColor, borderWidth: marksSetting.calloutSetting.borderWidth, bgColor: marksSetting.calloutSetting.bgColor, padding: marksSetting.calloutSetting.padding, display: marksSetting.calloutSetting.display, textAlign: marksSetting.calloutSetting.textAlign, anchorX: marksSetting.calloutSetting.anchorX, anchorY: marksSetting.calloutSetting.anchorY } })) this.markers = markers; } }); }, handleGetLongitudeLatitude(e) { console.log("点击地图获取经纬度", e); }, handleClickMarker(e) { console.log("点击标记点", e); }, handleCurrenPosition() { // 回到当前位置 this.latitude = 0; this.longitude = 0; uni.getLocation({ type: 'gcj02', success: res => { this.latitude = res.latitude; this.longitude = res.longitude; this.getMarkers(res.latitude, res.longitude); } }); }, handleClickEnlarge() { this.scale += 1; //地图放大 }, handleClickShrink() { this.scale -= 1; //地图缩小 } } } </script>
<style> .map_style { width: 100%; height: 100%; z-index: -1; } .cover-view { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; } .cover-view-image { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #ffffff; border-radius: 50%; margin-bottom: 10px; } .cover-view-image-position { width: 30px; height: 30px; } .cover-view-image-scale { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .cover-view-image-enlarge { width: 20px; height: 20px; } .cover-view-image-shrink { width: 20px; height: 20px; margin-top: 10px; } </style>
以上代码实现了以下功能:
- 在地图上显示当前位置,并以标记点的形式展示附近的餐厅。
- 可点击地图获取经纬度。
- 可点击标记点查看详细信息。
- 提供了地图缩放的功能,可以通过点击放大和缩小按钮来改变地图的缩放级别。
其中,需要注意的是:
在<map>标签中,通过:latitude和:longitude绑定数据来设置地图的经纬度。
通过:show-location="true"来显示当前位置。
通过:scale绑定数据来设置地图的缩放级别。
通过:markers绑定数据来设置标记点的集合,并在每个标记点中设置相应的样式和气泡设置。
监听@tap事件来获取地图上的经纬度。
监听@markertap事件来处理标记点的点击事件。
实例化QQMap对象,并使用其提供的API进行地图相关操作,如获取附近的标记点。
此外,还添加了一些样式来美化地图和按钮的显示效果。文章来源:https://www.toymoban.com/news/detail-744636.html
希望这篇文章能够帮助你实现uniapp微信小程序的地图功能!文章来源地址https://www.toymoban.com/news/detail-744636.html
到了这里,关于uniapp微信小程序地图功能实现教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!