阿里云服务器

前几天我们发布了zblog企业百度小程序 ,在联系我们页面加入了百度地图,通过后台经纬度进行定位。

下面分享一下如何实现百度小程序中加入百度地图

我们需要用到百度智能小程序的地图组件 swan.createMapContext    :

创建并返回 map 上下文 mapContext 对象。在自定义组件下,第二个参数传入组件实例 this,以操作组件内 <map/> 组件。mapContext 通过 mapId 跟一个 组件绑定,通过它可以操作对应的 组件。


js功能函数中加入:

data: {

scale: 16,
latitude: '39.929986',
longitude: '116.395645',
content: '百度科技园1',
polyline:[],
circles:[],
enable3d: false,
showCompass: false,
showLocation: true,
enableOverlooking: false,
enableZoom: true,
enableScroll: true,
enableRotate: false,
drawPolygon: false,
enableSatellite: false,
enableTraffic: false,
markers: [{
markerId: '2',
latitude: '39.929986',
longitude: '116.395645',
callout: {
display: 'ALWAYS',
content: '浙茶集团'
}
}, ],
polyline: [],
controls: [],
circles: [{
latitude: '40.052751',
longitude: '116.278796',
color: '#FF5F41FF',
fillColor: '#21FFFFFF',
radius: '200',
strokeWidth: '2'
}]

},

核心就是这个位置数据,可以通过api数据进行重新定义,这样就可以直接后台控制地图的定位了。

markers: [{
markerId: '2',
latitude: '39.929986',
longitude: '116.395645',
callout: {
display: 'ALWAYS',
content: '浙茶集团'
}
}, ],

然后在前端文件swan中调用出来:

<map
style="width:100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
markers="{{markers}}"
polyline="{{polyline}}"
polygons="{{drawPolygon ? polygons : []}}"
circles="{{circles}}"
controls="{{controls}}"
show-location="{{show-location}}"
include-points="{{include-points}}"
enable-3D="{{enable3d}}"
show-compass="{{showCompass}}"
enable-overlooking="{{enableOverlooking}}"
enable-zoom="{{enableZoom}}"
enable-scroll="{{enableScroll}}"
enable-rotate="{{enableRotate}}"
bindmarkertap="onMarkertap" bindcallouttap="onCallouttap" bindcontroltap="onControltap" bindregionchange="onRegionchange" bindtap="onTap" bindupdated="onUpdated">
</map>

显示效果如下:

小程序增加百度地图

相关阅读:
  • zblog百度营销小程序修复专题页加载功能
  • zblog百度营销型小程序使用教程
  • zblog百度营销小程序:tayunmarket 支持在线留言
  • zblog百度小程序增加53kf客服系统的方法
  • zblog博客百度小程序2.0版本发布
  • zblog百度小程序上传swan.uploadFile
  • zblog企业百度小程序上线
  • zblog百度小程序列表文章数量的调用方法
  • zblog百度小程序安装配置需要主要的问题
  • zblog百度小程序提交sitemap到小程序后台