在前端开发中，地图展示往往是必不可少的。而在移动端开发中，使用原生地图 SDK 会涉及到很多原生 code 和平台限制，这时候就可以使用基于 webview 的 weex-xc-amap。
weex-xc-amap 的 npm 包可以方便地将高德地图嵌入到 weex 中，提供了很多原生 SDK 相同的功能，并封装了一些 weex-xc-amap 独有的功能，下面是使用教程。
安装
npm i weex-xc-amap --save
使用
weex-xc-amap 的使用非常简单，只需要在模版中引用 weex-xc-amap，并在 JS 中提供所需的 props 即可。
基本示例
先看一下最基本的地图示例代码：
-- -------------------- ---- -------
----------
------------- -----------------------
-----------
--------
------ ---------- ---- --------------
------ ------- -
----------- -
----------
--
---- -- -
------ -
----------- -
---------- ---
------- ------------ ----------
-
-
-
-
---------mapOptions 包含了地图的中心点和缩放级别等参数，注意这里的中心点是经纬度数组。
运行这个示例，可以看到一个包含高德地图的组件，默认显示在北京天安门附近。
更多参数
在实际应用中，我们可能需要更多的参数来控制地图的行为。
下面是一些比较常用的参数。
mapOptions.zoomLevel
控制地图的缩放级别，默认值为 10，最大值为 19。
mapOptions: {
zoomLevel: 18
}mapOptions.showUserLocation
是否显示当前位置，默认为 false。
mapOptions: {
showUserLocation: true
}mapOptions.showsCompass
是否显示指南针。
mapOptions: {
showsCompass: true
}mapOptions.showsScale
是否显示比例尺。
mapOptions: {
showsScale: true
}mapOptions.showsZoomControl
是否显示缩放控件。
mapOptions: {
showsZoomControl: true
}mapOptions.rotateEnabled
是否允许地图旋转。
mapOptions: {
rotateEnabled: false
}mapOptions.overlookEnabled
是否允许地图俯视。
mapOptions: {
overlookEnabled: false
}mapOptions.region
控制地图的显示区域，这个参数是一个对象，包含了 region.center 和 region.span 两个参数。
region.center 是地图的中心点，也是经纬度数组。
region.span 是地图的范围，也是一个对象，包含了 latitudeDelta 和 longitudeDelta 两个参数。
-- -------------------- ---- -------
----------- -
------- -
------- ------------ -----------
----- -
-------------- -----
--------------- ----
-
-
-事件
类似于其他组件，weex-xc-amap 也支持事件监听，下面是一些常用的事件。
onMarkerTapped
当用户点击地图上的标记时，会触发 onMarkerTapped 事件。
<weex-xc-amap :options="mapOptions" @onMarkerTapped="onMarkerTapped"/>
onMarkerTapped (e) {
// e.markerId 是被点击的标记的 ID。
}onInfoWindowTapped
当用户点击地图上的 infoWindow 时，会触发 onInfoWindowTapped 事件。
<weex-xc-amap :options="mapOptions" @onInfoWindowTapped="onInfoWindowTapped"/>
onInfoWindowTapped (e) {
// e.markerId 是 infoWindow 所属的标记的 ID。
}onMapClicked
当用户点击地图时，会触发 onMapClicked 事件。
<weex-xc-amap :options="mapOptions" @onMapClicked="onMapClicked"/>
onMapClicked (e) {
// e.latLng 是用户点击的经纬度。
}总结
通过 npm 包 weex-xc-amap，我们可以很方便地在 weex 中使用高德地图，在移动端应用的开发中提供了很多便利。
在这篇文章中，我们介绍了 weex-xc-amap 的基本使用方法以及常用参数和事件，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726d81e8991b448e8a46