微信小程序绘制marker

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

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

目录

一、布局文件

二、css文件

三、js文件

1:定义marker数组

2:添加一个marker数据

四、运行效果


 微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个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',
    });

四、运行效果

五、留个脚印吧

大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;

🍅也可以关注文档末尾公众号🍅

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
微信小程序可以使用openlayers,但需要注意的是,openlayers是一个基于WebGL的库,而微信小程序不支持WebGL,因此需要使用openlayers提供的Canvas渲染方式。具体实现方法如下: 1. 引入openlayers库文件 在小程序的wxml文件中,使用canvas组件来绘制openlayers图层,可以在js文件中引入openlayers库文件,如下所示: ```javascript import ol from 'openlayers/dist/ol-debug'; ``` 2. 创建地图容器 在wxml文件中,添加canvas组件,并设置id和样式,如下所示: ```html <canvas id="map" style="width: 100%; height: 100%;"></canvas> ``` 3. 初始化地图 在js文件中,初始化地图容器和地图图层,如下所示: ```javascript let map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([120.15, 30.28]), zoom: 10 }) }); ``` 4. 绘制图形 使用openlayers提供的绘制工具,可以在地图上绘制点、线、面等图形。如下所示,绘制一个点: ```javascript let marker = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([120.15, 30.28])) }); let markerLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [marker] }), style: new ol.style.Style({ image: new ol.style.Icon({ src: '/images/marker.png', size: [32, 32], anchor: [0.5, 1] }) }) }); map.addLayer(markerLayer); ``` 5. 注意事项 在使用openlayers时,需要注意以下几点: - openlayers库文件较大,需要进行压缩和优化; - 小程序的Canvas组件的绘图能力有限,可能会影响openlayers的性能表现; - openlayers不支持小程序的事件机制,需要自行处理用户交互事件; - openlayers的地图数据需要通过网络加载,可能会影响地图的加载速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Android毕业设计源码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值