(1条消息) 微信小程序地图标记点，点击标记点显示详细信息源码加效果图_a_靖的博客

(1条消息) 微信小程序地图标记点，点击标记点显示详细信息源码加效果图_a_靖的博客_微信小程序地图标记点

Data: 2014-11-06 22:41:43Form: JournalClick: 11

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

(1条消息) 微信小程序地图标记点，点击标记点显示详细信息源码加效果图_a_靖的博客-CSDN博客_微信小程序地图标记点

效果图：

实现代码:

<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-view>
<cover-view class='index_shuaxin'>
</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-view>
</cover-view>
<cover-view class='viewIcon'>
<cover-image class='indexIcon' src='/images/time.png'></cover-image>
<cover-view class='timeText'>{{myall.time}}</cover-view>
<cover-image class='indexIcon1' data-id="{{myall}}" src='/images/share.png' bindtap='calling'></cover-image>
<cover-view class='timeText1' data-id="{{myall}}" bindtap='calling'>电话</cover-view>
<cover-image class='indexIcon2' src='/images/nav.png'></cover-image>
<cover-view class='timeText1'>导航</cover-view>
</cover-view>
</cover-view>
</map>
</block>

// map.js

var app = getApp()

var mymap = '';

var lat = '';

var long = '';

Page({

data: {

polyline: [{

points: [{

longitude: 113.3245211,

latitude: 23.10229

}, {

longitude: 113.324520,

latitude: 23.21229

}],

color: '#FF0000DD',

width: 2,

dottedLine: true

}],

controls: [{

id: 1,

iconPath: '/images/mk.png',

position: {

left: 0,

top: 300 - 1,

width: 50,

height: 50

clickable: true

}]

//引入数据库

onLoad: function(option) {

var url = app.url + 'Api/Api/get_shop_dp&PHPSESSID=' + wx.getStorageSync('PHPSESSID')

var that = this

console.log(option)

if (option.scene) {

this.setData({

isshow: false

})

wx.navigateTo({

url: '../chat/chat?scene=' + option.scene,

})

} else {

this.setData({

isshow: true

})

}

wx.request({ //让服务器端统一下单，并返回小程序支付的参数

url: url,

data: {

openid: wx.getStorageSync('openid')

success: function(res) {

console.log(res);

that.setData({

markers: res.data.data

});

wx.getLocation({

type: 'wgs84',

success(mres) {

var map_lat = mres.latitude;

var map_long = mres.longitude;

var map_speed = mres.speed;

var map_accuracy = mres.accuracy;

that.setData({

lat: map_lat

});

that.setData({

long: map_long

});

}

});

}

});

//显示对话框

showModal: function(event) {

//console.log(event.markerId);

var i = event.markerId;

var url = app.url + 'Api/Api/get_shop_dp_detail&PHPSESSID=' + wx.getStorageSync('PHPSESSID');

var that = this;

console.log('====get_detail====')

wx.request({

url: url,

data: {

id: i,

我是 PHP 程序员

(1条消息) 微信小程序地图标记点，点击标记点显示详细信息源码加效果图_a_靖的博客_微信小程序地图标记点