uni

2024-02-04 08:07| 来源: 网络整理| 查看: 265

前言：本以为很简单就可以解决的一样东西，就是在地图特定位置放置一个覆盖的图片就好了，实际上却是很简单，但是可惜你做的是小程序，这样子思路就会被截断。先自己摸索百度，最后发现这个版块是微信自家的服务，不对外开放，想要开放那就要问问它，最后发动是钞能力啦，这明显不符合要求。所以想过几种方法，最后使用的是web-view 嵌套高德地图的自定义地图的方法实现。

思路：

因为经过试验，所有微信方面小程序的方法，都不能满足要求，都不能实现如下效果所以只能通过先做好一个H5的地图，通过web-view标签嵌套在小程序，这样就能达到这种效果，我这边使用的是高德地图的自定义功能，高德的都是用编程的方式，所以都是代码块，没有像小程序那种可以使用标签写的。

因为这类的模板很多都不免费分享，这让我很懊恼。索性自己做了一个demo 然后分享出来供有需要的人使用，毕竟看微信开发者文档中挺多人求，但是都没热心人去分享。

一、引入高德地图

1.到高德开发平台申请账号，在控制台创建相关的应用，这里我们使用的网页的api，也就web端，拿到key就可以了

在这里插入图片描述

这里的步骤就可以用这位博主的方法，我也是用他的方法然后跟着文档改出来的 @小傲哥哥二、使用

上面的博主的一定要看。标签

先引入js文件

import AMap from '../../utils/utils.js'

data数据是上面博主的摘抄下来的

data() { return { title:'hello', provider:'', map: null, zoom:15, resAmap:null, scrollH:500, scrollW:500, initLat:38.913423,//初始维度 initLng:116.368904,//初始经度 covers:[], LlayAroundGroupOpen:true, //l网周边 } }

其实就这么一段代码是有用的，要是看不懂可以直接看官方文档的图片覆盖图层覆盖

async initAMap() { try { this.resAmap = await AMap(); this.$nextTick(() => { let that = this // this.getBroewerLatLng(); console.log('这是获取到的方法',this.resAmap) var map = new this.resAmap.Map('map', { center: [this.initLng, this.initLat], zoom: this.zoom, resizeEnable: true }); this.map = map; var imageLayer = new this.resAmap.ImageLayer({ bounds: new this.resAmap.Bounds( // 这是你地图铺在哪里的地方虚假数据请勿使用 [114.086041, 23.600853], //图片左下角第一位 +的话右移 - 左移 [114.099361, 23.581953], // 图片右上角 ), url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', // 这是你覆盖在地图的图片 zIndex:2, zooms: [3, 20] // 设置可见级别，[最小级别，最大级别] }) // 创建一个 Icon var startIcon = new this.resAmap.Icon({ // 图标尺寸 size: new this.resAmap.Size(40, 40), // 图标的取图地址 image: 'https://lbs.amap.com/demo/jsapi-v2/example/selflayer/imagelayer', // 图标所用图片大小 imageSize: new this.resAmap.Size(40, 40), }) var infoWindow = new this.resAmap.InfoWindow({offset: new this.resAmap.Pixel(0, -30)}); // 这里的marker 就是地图上面的你显示的景点的标点，要多少个可以循环 var marker = new this.resAmap.Marker({ icon:startIcon, position: [114.086041, 23.600853], // 这是定位的点 map: map, // 这是下标显示的名字, 我这里没注意看所以用了偏移值，其实可以只用 top 改成 bottom 应该也一样 label: { direction: 'top', // 显示在标记图片的什么地方 content: ""+'小青龙'+"", offset: new this.resAmap.Pixel(0,70) // 偏移值 } }); // 设置点点击时候触发的方法 marker.on('click', markerClick); marker.emit('click', {target: marker}); // 设置定位地点为标点的中心 map.setFitView(); map.add(imageLayer); map.on('click', this.showInfoClick); // 地图点击的方法 console.log(this.map) //解析定位结果 // var then = this; function onComplete(data) { console.log(data) // 获取到的定位信息 } function markerClick(e) { console.log('点击到的e',e.target) } function onError(data) { console.log(data) // 定位失败的信息 } }) } catch (e) { console.log(e) } }

到了这里就完成了，只需要把这个项目部署在公网上，然后小程序直接用

// ========================== 修改2021-7-6 ==================// 补充一句: 公网地址在发布正式版本中，需要去微信管理平台补充公网域名作为业务地址才行，不然那会出现网页非法不能查看的情况。在这里插入图片描述

【本文地址】

公司简介

联系我们