前几天我们发布了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>

显示效果如下：