前几天我们发布了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>
显示效果如下: