<view class="contactBox">
<view bindtap="gomap">
<view class="icon">
<image mode="widthFix" src="img/map@2x.png" class="image"></image>
</view>成都市高新区环球中心W6区2028
</view>
<view class="contactList">
<view class="icon">
<image mode="widthFix" src="img/icon_zxkf@2x.png" class="image"></image>
</view>
<button type="primary" bindtap="primary" session-from="weapp" open-type="contact" size="default" class="contact"> 立即咨询 </button> 在线客服
</view>
<view bindtap="call" data-tel="028-62030710">
<view class="icon">
<image mode="widthFix" src="img/tel@2x.png" class="image"></image>
</view>+86 18111594813
</view>
<view bindtap="call" data-tel="17713602090">
<view class="icon">
<image mode="widthFix" src="img/phone@2x.png" class="image"></image>
</view>17713602090
<view class="small">(24小时热线)</view>
</view>
<view bindtap="call" data-tel="17713602090">
<view class="icon">
<image mode="widthFix" src="img/email@2x.png" class="image"></image>
</view>1279598865@qq.com
<view class="small"></view>
</view>
<view bindtap="call" data-tel="028-62030710">
<view class="icon">
<image mode="widthFix" src="img/qq.png" class="image"></image>
</view>1279598865
</view>
<view bindtap="copyUrl" data-text="网址">
<view class="icon">
<image mode="widthFix" src="img/icon_wz@2x.png" class="image"></image>
</view><text selectable="true">http://www.angkebrand.com/</text>
<view class="small"></view>
</view>
</view>
<map id="map" latitude="30.619850" longitude="104.043170" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height:150px;"></map>
|
.contactBox{
padding: 10px;
}
.contactBox>view{
font-size: 14px;
color: gray;
padding: 20px 0;
color: gray;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAJE0lEQVR4Xu2aMXJURxCG50mEdlmRin0EyCcwJ3BxARccQQ6d2SeAG+DQGeYGBM6F7QOYG4AD7asiWWcK0Gpcj1qVF1m7mumZnjdv+tsqEujuef3989XuSnSOFwQgsJNABxsIQGA3AQThdkBgDwEE4XpAAEG4AxCQEeAdRMaNLiMEEMRI0KwpI4AgMm50GSGAIEaCZk0ZAQSRcaPLCAEEMRI0a8oIIIiMG11GCCCIkaBZU0YAQWTc6DJCAEGMBM2aMgIIIuNGlxECCGIkaNaUEUAQGTe6jBBAECNBs6aMAILIuNFlhACCGAmaNWUEEETGjS4jBBDESNCsKSOAIDJudBkhgCBGgmZNGQEEkXGjywgBBDESNGvKCCCIjBtdRgggiJGgWVNGAEFk3OgyQgBBjATNmjICCLLF7cOHD4/W6/U33vujruveLhaL32VY6WqFAII455bL5VPn3Avn3MmNYN87537q+/51K4GzRxwB84IMw3DqvX+5D5v3/tcHDx58H4eW6hYImBZkGIbH3vuzkCCRJIRSezWmBVkul+NHpyehsSJJKKl26qwL4mOjRJJYYvOuNytIzMermxEjybwvfczTWxbkxHv/LgbWdi2SSMnNq8+sIGNMy+XyH+fcV9LIkERKbj59pgU5Pz9/3nXds5S4kCSFXv29pgVZrVZHFxcXb51zD1OiQpIUenX3mhZkjGb87yWXl5dvUj5qjXOQpO6LLn0684IgifTq2OhDkE3OvJPYuPCxWyLIFjEkib0+7dcjyI2MkaT9Sx+zIYLcQgtJYq5Q27UIsiNfJGn74oduhyB7SCFJ6DVqtw5B7sgWSdq9/CGbIUgAJSQJgNRoCYIEBoskgaAaK0OQiECRJAJWI6UIEhkkkkQCm3k5gggCRBIBtJm2IIgwOCQRgptZG4IkBIYkCfBm0oogiUEhSSLAytsRJENASJIBYqUjECRTMEiSCWRlYxAkYyBIkhFmJaMQJHMQSJIZ6MTjEEQhACRRgDrRSARRAo8kSmALj0UQReBIogi30GgEUQaNJMqAlccjiDLgcTySFICsdASCKIG9ORZJCoHOfAyCZAa6bxySFISd6SgEyQQydAyShJKqow5BJsgBSSaALjwSQYTgUtuQJJVgmX4EKcP51lOQZEL4gUcjSCAorTIk0SKbZy6C5OGYNAVJkvCpNiOIKt7w4UgSzqpkJYKUpH3HWUhSURibR0GQyjJBkroCQZC68vj0NEhSTygIUk8Wnz0JktQRDILUkQO/J6k0BwSpNJjrx+KdZNqAEGRa/kGnI0kQJpUiBFHBmn8okuRnGjIRQUIoVVKDJOWDQJDyzJNORJIkfNHNCBKNbPoGJCmXAYKUY531JCTJinPnMAQpw1nlFCRRwfrZUATRZ6x6ApKo4nUIosu3yHQk0cOMIHpsi05GEh3cCKLDdZKpSJIfO4LkZzrpRCTJix9B8vKsYlouSbqu+2WxWPxQxVITPQSCTARe+9hckhwcHHx3//7937Sft9b5CFJrMhmeK5Mk7/u+/zrD48xyBILMMrbwh84hSd/3Zu+J2cXDr9j8KzeS/Omc+0KyjeWPWQgiuTEz6xkFWa/Xf1xdXX3ZdfGR37t379vj4+NRMHOveFrmEM174VGOjx8/nnVddzTKcXV15WIl4SPWvO8AT7+DwLYc1yUCSfiSzg1rj8BtcsRK4r13h4eH/Ji3vethe6N9coRKMspxcHDALwptX6X2tg+RY3vr8SPXKMP45/q7yebvXvV9f9oeobiN+JIex6vq6lg59iyDHBs4CFL1lQ9/OOQIZxVTiSAxtCqtRQ69YBBEj22RycihixlBdPmqTkcOVbyfhiOIPmOVE5BDBev/hiJIGc5ZT0GOrDj3DkOQcqyznIQcWTAGD0GQYFTTFyJH+QwQpDxz0YnIIcKW3IQgyQj1ByCHPuNdJyDIdOyDTkaOIExqRQiihjZ9MHKkM0ydgCCpBJX6kUMJbORYBIkEVqIcOUpQDjsDQcI4FatCjmKogw5CkCBMZYqQowznmFMQJIaWYi1yKMJNGI0gCfBytSJHLpL55yBIfqZRE5EjClfxYgQpjvy/A5FjQviBRyNIIKjcZciRm6jOPATR4bp3KnJMAF14JIIIwUnbkENKbpo+BCnIHTkKws50FIJkAnnXGOS4i1Cd/44gBXJBjgKQlY5AECWw12ORQxmw8ngEUQSMHIpwC41GECXQyKEEtvBYBFEAjhwKUCcaiSCZwSNHZqATj0OQjAEgR0aYlYxCkExBIEcmkJWNQZAMgSBHBoiVjkCQxGCQIxFg5e0IkhAQciTAm0krggiDQg4huJm1IYggMOQQQJtpC4JEBocckcBmXo4gEQEiRwSsRkoRJDBI5AgE1VgZggQEihwBkBotQZA7gkWORm9+4FoIsgcUcgTeoobLEGRHuMjR8K2PWA1BboGFHBE3qPFSBLkRMHI0fuMj10OQLWDIEXl7DJQjyCZk5DBw2wUrIohzDjkEN8dIi3lBkMPITReuaVqQ1Wp1dHFx8Zdz7kTI77rtVd/3p4kzaK+QgGlBzs/Pn3dd9ywxF+RIBFhzu3VBVl3XHSUEhBwJ8ObQalaQYRhOvPfvEkJCjgR4c2k1K8j45fzy8nL8/iF5IYeE2gx7zAoyZrVcLr0gM+QQQJtri3VBXjvnnkSEhxwRsFooNS3IMAyPvfdngUEiRyColspMCzIGOQzDqff+5R2hIkdLtz5iF/OCbL6LPHXO/eyce3iD3d/OuR/7vh8/ivEySABBtkIff7K1Xq8fee+Puq57u1gs3hi8E6y8RQBBuA4Q2EMAQbgeEEAQ7gAEZAR4B5Fxo8sIAQQxEjRrygggiIwbXUYIIIiRoFlTRgBBZNzoMkIAQYwEzZoyAggi40aXEQIIYiRo1pQRQBAZN7qMEEAQI0GzpowAgsi40WWEAIIYCZo1ZQQQRMaNLiMEEMRI0KwpI4AgMm50GSGAIEaCZk0ZAQSRcaPLCAEEMRI0a8oIIIiMG11GCCCIkaBZU0YAQWTc6DJCAEGMBM2aMgIIIuNGlxECCGIkaNaUEUAQGTe6jBBAECNBs6aMAILIuNFlhACCGAmaNWUE/gUqUhEUstctGwAAAABJRU5ErkJggg==) right no-repeat;
background-size:15px;
position: relative;
}
.contactBox>view:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(0,0,0,0.1);
transform: scaleY(0.3);
}
.contactBox .icon{
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
background-size:auto 20px !important;
margin-right: 10px;
}
.contactBox view:nth-child(4) .small{
display: inline-block;
font-size: 10px;
margin-left: 10px;
vertical-align: middle;
color:#fc5d5d;
}
.contactBox view .icon image{
width: 25px;
}
.contactList{
position: relative;
}
.contactList .contact{
position: absolute;
width:100%;
height: 100%;
top: 0;
right: 0;
opacity: 0;
}
|
// map.js
Page({
data: {
markers: [{
iconPath: "img/mapicon.gif",
id: 0,
latitude: 30.619850,
longitude: 104.043170,
width: 30,
height: 30,
animationData: {}
}],
polyline: [{
points: [{
longitude: 0,
latitude: 0
}, {
longitude: 30.547920,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
},
call:function(event){
wx.makePhoneCall({
phoneNumber: event.currentTarget.dataset.tel //仅为示例，并非真实的电话号码
})
},
onLoad:function(){
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
console.log(res)
}
})
},
gomap:function(){
var latitude = 30.619850
var longitude = 104.043170
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 28,
name:'成都互诚在线科技有限公司',
address:'成都市武侯区创业路49号4层'
})
},
copyUrl:function(event){
wx.showToast({
title: '长按复制'+ event.currentTarget.dataset.text,
image:'img/langclick.png',
icon: 'success',
duration: 2000
})
}
})
|
模板简介：该模板名称为【微信小程序宏华净水联系我们导航地图设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
