uniapp 地图导航唤起导航自定义图标自定义提示泡泡

uniapp 地图导航

唤起导航
自定义图标
自定义提示泡泡

复制过去即可

<template><view class="container"><!-- 此处为地图 --><view class="map-common-mt"> <map :latitude="latitude" scale="12" :longitude="longitude" :markers="markers" show-location> </map></view><view class="address_box dfsb" @click="navigationTo()"><view class="title "><view class="tip">{{title}}</view><view class="titleAddress">{{address}}</view></view> <view class="iconmapText">导航<text class="iconfont icon-map"></text> </view></view></view>
</template><script>
export default {components: { },data() {return {// latitude: 22.545809,// longitude: 113.985274,address: '广东省深圳市南山区沙河街道星河街社区侨城西街1号',title: '深圳欢乐谷',scrollZ_index: false,  markers: [{address: '广东省深圳市南山区沙河街道星河街社区侨城西街',title: '深圳欢乐谷',id: 11,latitude: 22.545809,longitude: 113.985274,// iconPath: "/static/marker.png", //图标路径// width: 29,// height: 29,callout: { //marker气泡content: '深圳欢乐谷',color: "#fff",bgColor: "rgba(15, 158, 250, 1)",borderRadius: 10,fontSize: 12,textAlign: "center",padding: 5,display: 'ALWAYS',},},],}},onLoad(res) {this.latitude = res.latitudethis.longitude = res.longitudethis.address = res.addressthis.title = res.title this.markers[0].latitude = res.latitudethis.markers[0].longitude = res.longitudethis.markers[0].address = res.addressthis.markers[0].title = res.titlethis.markers[0].callout.content = res.title},methods: {//点击跳转地图navigationTo() {   uni.openLocation({latitude: this.latitude / 1,longitude: this.longitude / 1,name: this.title,address: this.address,})},}
}
</script><style lang="scss" scoped>
.map-common-mt{width: 100%;height: 100%; box-shadow: 0 3px 20px 0 #D6D6D6; border-radius: 4px; map {width: 100%;height: 100vh; }
}
.address_box{position: absolute;bottom: 0;width: 100%;right: 0;left: 0;height: 64px;// line-height: 44px;z-index: 111;background: #F5F5F5;padding: 0 15px; .title{.tip{color: #2d2d2d;font-size: 14px;font-weight: bold;padding-bottom: 6px;}}.iconmapText{display: flex;color: rgba(15, 158, 250, 1);font-size: 15px;font-weight: bold;height: 24px;line-height: 24px;padding-right: 6px;.icon-map {color: rgba(15, 158, 250, 1);font-size: 20px;}}
}
</style>

uniapp 地图导航唤起导航自定义图标自定义提示泡泡相关推荐

vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
地图自定义图标_如何在H5里添加地图导航？这份教程请收藏！
智能手机的出现为我们的生活带来了翻天覆地的改变,比如说衣食住行都有了显著的变化.外卖让就餐更加方便.手机支付也让生活更加便利,地图导航功能更是让大家从此不再迷路,有了手机以后,大家都开始习惯直接用手机 ...
uniapp 导航栏自定义图标
导航栏右上角的图标自定义一.阿里图标库找到需要的图标加入购物车二.打开购物车下载代码到项目里 static 文件夹下三.下载完成后,有一些文件四.page.json titleNV ...
android高德地图上加自定义菜单,自定义UI控件-UI界面定制-开发指南-Android 导航SDK | 高德地图API...
关于自定义 UI 布局,您还可以参考官方Demo--完全自定义UI导航. 单元素自定义可以通过AMapNaviViewOptions中如下接口进行单UI元素显示隐藏,只列出部分接口,更多功能请参考A ...
uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义
利用uni-app怎么对底部导航栏进行自定义发布时间:2020-12-14 15:15:03 来源:亿速云阅读:78 利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策 ...
flutter 自定义tab导航-顶部导航-底部导航
flutter_custom_bottom_tab_bar 和另外一个bottom_tab_bar的区别:github.com/LiuC520/flu- bottom_tab_bar是通过改变stat ...
uniapp map地图显示图标markers问题，自定义图标不显示
自己记录一下uniapp开发小程序关于map地图问题 <map style="width:750rpx; height:100vh;" scale="17" ...
bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
更换百度地图图标html,百度地图接口，自定义图标，点击切换图标
这里实现了一个指定地区的地图,自定义图标,点击切换图标 1.[代码][JavaScript]代码 body, html,#allmap {width: 100%;height: 100%;overfl ...

uniapp 地图导航唤起导航自定义图标自定义提示泡泡

uniapp 地图导航

uniapp 地图导航唤起导航自定义图标自定义提示泡泡相关推荐

最新文章

热门文章

uniapp 地图导航 唤起导航 自定义图标 自定义提示泡泡

uniapp 地图导航

uniapp 地图导航 唤起导航 自定义图标 自定义提示泡泡相关推荐

最新文章

热门文章

uniapp 地图导航唤起导航自定义图标自定义提示泡泡

uniapp 地图导航唤起导航自定义图标自定义提示泡泡相关推荐