index页面

<template><div><hchPosition   :storeData="storeData" :markers="markers"></hchPosition></div><!-- <div class="content"><map :scale='18' id="myMap"  style="width: 100%;" :style="{height: mapHeight + 'px'}":markers="markers"  enable-satellite="true" :longitude="longitude" :latitude="latitude" :circles="circles"></map></div> -->
</template><script>//引用组件  uni-app中创建nvue文件// import hchPosition from '@/components/hch-position/hch-position.vue'import hchPosition from '@/components/hch-position/hch-position.nvue'export default {data() {return {latitude: 0,longitude: 0,circles: [],//圆storeData: [ //门店信息展示  id name address tel 必填{id: 1,name: '热源',address: '热源1号站',tel: '热源1号站：瞬时热量、瞬时流量、单耗',},{id: 2,name: '热源',address: '热源2号站',tel: '热源2号站：瞬时热量、瞬时流量、单耗',}, {id: 3,name: '换热站',address: '换热站1号',tel: '换热站1：瞬时热量、瞬时流量、单耗',},],markers: [ //门店在地图上的标记 以下字段必填  {id: 1,latitude: 39.03,// latitude: 39.939203,longitude: 116.210689,iconPath: '/static/hch-position/ry1.png',callout: {content: "热源1号站",borderRadius: 10,padding: 10,display: "ALWAYS",}}, {id: 2,latitude: 39.945441,longitude: 116.217556,iconPath: '/static/hch-position/ry2.png',callout: {content: "热源2号站",borderRadius: 10,padding: 10,display: "ALWAYS",}},{id: 3,latitude: 39.8226,longitude: 116.250166,iconPath: '/static/hch-position/hrz1.png',callout: {content: "换热站1号",borderRadius: 10,padding: 10,display: "ALWAYS",}}],}},components: {hchPosition,},created() {// this.getLocationInfo()},methods: {// 获取地理位置// getLocationInfo() { //      console.log(111)//     var that = this//  uni.getLocation({//         type: 'wgs84',//      success(res) {//            console.log(res, "当前位置");//           that.latitude = res.latitude//             that.longitude = res.longitude//           console.log(res.latitude+"——"+res.longitude)//          //标记点//             that.markers = [{//                id: 1,//                latitude: res.latitude,//               longitude: res.longitude,//                 iconPath: '/static/hch-position/wd.png',//            }]//            that.circles = [{ //在地图上显示圆//              latitude: res.latitude,//               longitude: res.longitude,//                 fillColor: "#D9E6EF", //填充颜色//                color: "#A7B6CB", //描边的颜色//               radius: 50, //半径//              strokeWidth: 2 //描边的宽度//            }]//        }//     });// },}}
</script><style></style>

组件页面【创建nvue文件】

<template><div><div class="page-body"><div class="page-section page-section-gap"><map id="myMap" style="width: 100%; height: 300px;" show-compass="true" enable-satellite="true":latitude="latitude" @anchorpointtap="anchorpointtap" :longitude="longitude" :markers="markers"show-location="true" enable-scroll enable-zoom @tap="bindtap" :circles="circles"@callouttap="callouttap" @regionchange="regionchange" @updated="updated"></map></div><div class="store-tips"><div class="store-des-box" v-if="storeFlag" @tap="storeDesEvn"><image class="store-img" :src="storemark"></image><!-- <image class="store-img" src="/static/img/dzd.png"></image> --><div class="store-des"><div class="store-name">{{store.name}}</div><div class="store-address">地址:{{store.address}}</div><div class="store-tel">电话:{{store.tel}}</div></div></div></div><div class="near-num">距离最近的门店{{distanceL}}千米</div><!-- <image class="address-icon" src="/static/Home.png"></image> --></div></div>
</template><script>export default {props: {storeData: {type: Array,},markers: {type: Array,}},data() {return {store: {},storeFlag: false,storeAdFlag: true,distanceL: 0, //附近店门的距离latitude: 39,longitude: 116,circles: [], //圆controls: [],storemark: {},}},watch: {latitude(val) {this.latitude = val},longitude(val) {this.longitude = val}},mounted() {console.log(this.latitude)console.log(this.markers)this.getLocationInfo()},methods: {getLocationInfo() {console.log(111)var that = thisuni.getLocation({type: 'wgs84',success(res) {console.log(res, "当前位置");that.latitude = res.latitudethat.longitude = res.longitudeconsole.log(res.latitude + "——" + res.longitude)//标记点that.markers.push({id: 1,latitude: res.latitude,longitude: res.longitude,iconPath: '/static/hch-position/wddw.png',})that.circles = [{ //在地图上显示圆latitude: res.latitude,longitude: res.longitude,fillColor: "#D9E6EF", //填充颜色color: "#A7B6CB", //描边的颜色radius: 50, //半径strokeWidth: 2 //描边的宽度}]}});},// 点击了门店信息storeDesEvn() {uni.showToast({title: "自己自定义跳门店详情页介绍",duration: 2000,icon: "none"})},// 点击气泡callouttap(e) {this.storeFlag = truethis.storeAdFlag = falsefor (let i = 0; i < this.storeData.length; i++) {const ele = this.storeData[i]// debuggerconsole.log(e.detail.markerId)if (ele.id == e.detail.markerId) {this.store = elethis.storemark = this.markers[i].iconPathbreak}}},anchorpointtap(e) {console.log(666666666666666)console.log(e.detail)},// 点击地图bindtap(id) {this.storeFlag = false// this.storeAdFlag=true;},// 隐藏广告图片// hideAd() {//   this.storeAdFlag = false// },updated() {},// 改变视野时改变经纬度regionchange(e) {let _this = this// 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。// var mapCtx = wx.createMapContext("myMap", this)var mapCtx = uni.createMapContext("myMap", this)mapCtx.getCenterLocation({success: function(res) {_this.centerLatitude = res.latitude_this.centerLongitude = res.longitude_this.nearDistance(_this.markers,_this.centerLatitude,_this.centerLongitude)},fail: function(res) {console.log(res)}}) //获取当前地图的中心经纬度},// 两点间距离distance(la1, lo1, la2, lo2) {var La1 = (la1 * Math.PI) / 180.0var La2 = (la2 * Math.PI) / 180.0var La3 = La1 - La2var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0var s =2 *Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) +Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)))s = s * 6378.137 //地球半径s = Math.round(s * 10000) / 10000return s},// 计算最近的距离nearDistance(array, centerLatitude, centerLongitude) {let temp = []for (let i = 0, l = array.length; i < l; i++) {const element = array[i]let d = this.distance(element.latitude,element.longitude,centerLatitude,centerLongitude)temp.push(d)}this.distanceL = Math.min.apply(null, temp)}},onShow() {},onReady() {}}
</script><style lang="scss" scoped>.content {text-align: center;height: 400rpx;}.page-section {z-index: 0;}.store-tips {width: 600rpx;height: 100rpx;margin: 10rpx auto;border-radius: 10rpx;position: absolute;top: 10rpx;left: 50%;transform: translate(-50%, 0);z-index: 2;overflow: hidden;.store-des-box {background: #fff;}.store-img {width: 80rpx;height: 80rpx;border-radius: 10rpx;margin: 10rpx;float: left;}.store-des {padding-top: 8rpx;float: left;line-height: 1;font-size: 22rpx;color: #666;padding-left: 20rpx;.store-name {font-weight: 600;color: deeppink;}}.store-clear {width: 30rpx;height: 30rpx;position: absolute;top: 7rpx;right: 7rpx;margin: 30rpx;}}.address-icon {width: 38rpx;height: 40rpx;position: absolute;top: 22%;left: 50%;z-index: 2;margin-bottom: -20rpx;margin-left: -20rpx;}.near-num {padding: 10rpx 20rpx;border-radius: 10rpx;position: absolute;top: 17%;left: 50%;z-index: 2;font-size: 24rpx;background: #fff;transform: translate(-50%, 0);}
</style>

生成高德地图Key

上述代码调试是可以定位到当前位置的，如需发布后仍需定位则需要申请key

发布版安全码SHA1
应用打包时使用证书的指纹字符串（SHA1）
HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
HBuilderX云端打包选择“公共测试证书”时，SHA1值为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，详情参考：https://ask.dcloud.net.cn/article/36522
HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/36522
注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位

申请高德地图key时 PackageName为您打包时的包名

uni-app 引用地图相关推荐

uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uniapp h5、app引用外部在线js
uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

uni-app 引用地图

插件市场引用为 https://ext.dcloud.net.cn/plugin?id=615

index页面

组件页面【创建nvue文件】

生成高德地图Key

uni-app 引用地图相关推荐

最新文章

热门文章

uni-app 引用地图

插件市场引用为 https://ext.dcloud.net.cn/plugin?id=615

index页面

组件页面 【创建nvue文件】

生成高德地图Key

uni-app 引用地图相关推荐

最新文章

热门文章

组件页面【创建nvue文件】