高德的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
在线演示：http://nsapp.applinzi.com/gmapdemo/

组件源码

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