高德的Vue地图插件
直接在Vue中使用高德地图的JS API也不是很难的事,如果封装一下呢,使用起来就更方便了。封装完后,使用的方式如下:<ginkgo-map ref="map" class="gingo-map" :gmapObj.sync="gmap" :options=&q
·
直接在Vue中使用高德地图的JS API也不是很难的事,如果封装一下呢,使用起来就更方便了。
封装完后,使用的方式如下:
<ginkgo-map ref="map" class="gingo-map" :gmapObj.sync="gmap" :options="mapOptions" :zoom.sync="zoom" :center.sync="center"
:markers="markers" :polylines="polylines" :polygons="polygons" :circles="circles" :rectangles="rectangles" :texts="texts"
:trackData="trackData" :trackOptions="trackOptions" :tracker.sync="tracker"
:editData.sync="editData" :editer.sync="editer" :imageLayers="imageLayers">
</ginkgo-map>
通过属性的设置,就可以在地图上显示点、线、面等覆盖物,还可以进行轨迹回放、创建或修改点/线/面等覆盖物。
安装
已经做成node模块,直接用npm安装即可:
npm install ginkgo-map
使用
index.html中引入API
在index.html中引入高德地图的JS API:
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=a6a80a41a8543e348e6497b1bd0e7821&plugin=AMap.Scale,AMap.MapType,AMap.ToolBar,AMap.Geocoder,AMap.PolyEditor,AMap.CircleEditor,AMap.RectangleEditor"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
main.js中引入地图组件
import GinkgoMap from 'ginkgo-map'
Vue.use(GinkgoMap)
Vue组件中使用
直接用标签形式使用:
<ginkgo-map ref="map" class="gingo-map" :gmapObj.sync="gmap" :options="mapOptions" :zoom.sync="zoom" :center.sync="center"></ginkgo-map>
Demo
源码:https://github.com/sharplog/ginkgo-map-demo
在线演示:http://nsapp.applinzi.com/gmapdemo/
组件源码
更多推荐
已为社区贡献1条内容
所有评论(0)