微信小程序绘制marker

Android毕业设计源码

已于 2023-08-09 08:50:40 修改

阅读量935

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-07-05 14:58:25 首次发布

本文链接：https://blog.csdn.net/u014388322/article/details/131555857

版权

微信小程序专栏收录该内容

42 篇文章 9 订阅

订阅专栏

博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序之绘制多个marker以及调用手机地图软件导航

一、布局文件

<map class="mapUI" id="myMap" markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" include-points='{{points}}' scale="16"></map>

二、css文件

page{
  background-color: #f1f1f1;
  height:100%
}

.mapUI{
  width: 100%;
  height: 100%;
}

三、js文件

1：定义marker数组

data: {
   markers: [],
}

2：添加一个marker数据


    markers.push({
      id: 9001,
      latitude: this.data.gps[this.data.gps.length - 1].split(",")[1],
      longitude: this.data.gps[this.data.gps.length - 1].split(",")[0],
      name: "终点",
      iconPath: '../image/icon_end.png',
      content: "marker显示的数据信息",
      width: '30px',
      height: '45px',
    });