微信小程序地图标记点，点击标记点显示详细信息源码加效果图

最新推荐文章于 2023-11-28 00:56:02 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2023-11-28 00:56:02 发布

阅读量7.3k

点赞数 6

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_41241504/article/details/88850110

版权

这篇博客分享了如何在微信小程序中实现地图标记点的功能，并且详细讲解了当用户点击标记点时如何显示详细信息。提供了源码示例，包括CSS和JS部分，并且博主还提供web前端开发服务。

摘要由CSDN通过智能技术生成

q群： 581478349

实现源码

<!-- <text>{
  {markers[id].placeName}}</text> -->
<block wx:if='{
  {isshow}}'>
  <map id="map" longitude="114.048410" latitude="22.648760" scale="8" include-points="{
  {markers}}" markers="{
  {markers}}" bindmarkertap="showModal" data-id="{
  {markers}}" polyline="{
  {polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;">
 
 
    <cover-view class='index_bt1'>
      <cover-image class='xiaoer' bindtap="login" src="/images/mk.png" />
    </cover-view>
    <cover-view class='index_shuaxin'>
      <cover-image class='shuaxin' src="/images/mk.png" />
    </cover-view>
 
    <!--屏幕背景变暗的背景  -->
    <cover-view class="commodity_screen" bindtap="hideModal" wx:if="{
  {showModalStatus}}"></cover-view>
    <!--弹出框  -->
    <cover-view animation="{
  {animationData}}" class="commodity_attr_box" wx:if="{
  {showModalStatus}}">
 
      <cover-view class='placeBox'>
 
        <cover-view class='placeViewLt'>
          <cover-view class='viewTitle'>{
  {myall.placeName}}</cover-view>
          <cover-view class='viewDis'>{
  {myall.dis}}</cover-view>
          <cover-view class='viewAddr'>{
  {myall.adr}}</cover-view>
        </cover-view>
        <cover-view class='placeViewRt'>
          <cover-image data-id&