vue+vue-amap

高德地图开放文档官方文档：JS API 示例 | 高德地图API

其他文档：组件 | vue-amap

main.js中全局引入:

// 高德地图
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德的key
  key: 'xxxx',
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
    'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch','AMap.CircleMarker','AMap.Polyline'
    // 'AMap.Object3DLayer', 'AMap.Object3D'
  ]
});
//高德的安全密钥
window._AMapSecurityConfig = {
  securityJsCode: 'xxxxxxxxx',
}

以下是地图组件页面代码：

两种效果分别是调用brokenStraightLine（折线）和bezierCurve（贝塞尔曲线）两个方法来实现。

 效果图如下：（项目的需求是把供应商发货地址和我司收货地址用直线连起来，实际上这个是可以做折线的，我觉得就像路线）

 这是用贝塞尔曲线实现的将两个地址用直线连起来（折线也可以用showDir:true属性设置箭头）