微信小程序之map地图组件的使用

最新推荐文章于 2025-02-20 11:14:08 发布

原创

最新推荐文章于 2025-02-20 11:14:08 发布 · 1.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #小程序

博客介绍了小程序的定位与导航功能代码，可复制粘贴使用，以手机测试为准。其功能包括自身定位、输入目标地点、导航到目标地点，还能搜索目标地点周边，点击标记点可切换导航，同时给出了腾讯位置服务官方链接。

下面代码粘贴复制就可以访问，另外一切以手机测试为准

主要体现的功能
一、本身自我的一个定位
二、输入目标地点
三、导航到目标地点
四、目标地点周边的搜索，和点击标记点，在点击（到这去）实现导航切换

前端页面

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: {
   
   {height}}px;"
      latitude="{
   
   {latitude}}"
      longitude="{
   
   {longitude}}"
      markers="{
   
   {markers}}"
      covers="{
   
   {covers}}"
      scale="{
   
   {scale}}"
      bindmarkertap="markerTap"
    ></map>
    <view class="Dang" bindtap="Dingwei"><image src="../images/dingweidang.png"></image></view>
    <view class="Daohang">
    <view class="title">{
   
   {
   
   name==''?'未选择':name}}</view>
    <view class="caozuo">
        <button class="zhou" bindtap="Zhoubian"><image src="../images/zhoubian.png"></image><text>周边</text></button>
        <button class="left" bindtap="getCenterLocation" type="primary"><image src="../images/mudidi.png"></image><text>选择目的地</text></button>
        <button class="right" bindtap="Xdiandaohang"><image src="../images/daozhequ.png"></image><text>到这去</text></button>
    </view>
    </view>
  </view>
</view>

button {
   
   
  margin:0;
  padding:0;
  border-radius:0;
  border:none;
  font-size:1em;
  background-color:transparent;
}
button::after{
   
   
  border: none;
}
.page-section-gap{
   
   
  box-sizing: border-box;
  position: relative;
}
.page-section-gap .Dang{
   
   
  position: absolute;
  bottom: 280rpx;
  right: 40rpx;
  background-color: #fff;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items:center;
}
.page-section-gap .Dang image{
   
   
  width: 40rpx;
  height: 40rpx;
}
.page-body-button {
   
   
  margin-bottom: 30rpx;
}

.daohang{
   
   
  border-radius: 10rpx;
  background-color: #000;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  font-weight: bold;
}
.Zhoubian{
   
   
  margin-top: 20px;
}
.page-body .Daohang{
   
   
  position: absolute;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 999;
  width: 100%;
  padding: 20rpx 0;
}
.page-body .Daohang .title{
   
   
  font-size: 30rpx;
  font-weight: 500;
  col