高德的Vue地图插件 - 好文

直接在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
<https://github.com/sharplog/ginkgo-map-demo>
在线演示：http://nsapp.applinzi.com/gmapdemo/ <http://nsapp.applinzi.com/gmapdemo/>

组件源码

https://github.com/sharplog/ginkgo-map <https://github.com/sharplog/ginkgo-map>

热门工具换一换