微信小程序地图标记点

项目中想要实现的效果是点击地图上的搜索框,输入想要搜索的公司名称,点击列表传给地图页,公司的经纬度以及相应的其他信息。在地图上显示该点及信息。

wxml代码示图:

1514045-7f58fae31fa0c9e5.png

先简单说一下:

标记1处:markers,就是今天的重点。有了它才能实现在地图的标记点

标记2处:将地图展示的高度设为了动态,根据是否显示标记点的公司名称来判断(这里标记点公司名称作为地图底部的弹窗来显示或隐藏,也就是截图中的<!-- 底部弹窗 -->)

标记3处:点击标记点时触发

WXSS代码示图:

1514045-ade0bb609d7b72d9.png

js代码示图:

1514045-48d020a7b452b841.png

效果图:

1514045-e22ec9a9e0242c2c.png

猜你喜欢

转载自blog.csdn.net/weixin_34014277/article/details/87251166