ionic4使用高德地圖踩坑（一）

之前我寫過一篇博客 ： ionic4集成高德地圖 https://blog.csdn.net/z15802933724/article/details/82500215 成功的使用

了高德地圖，不過中間有點問題，我在計算點到線的距離的時候報錯了…

core.js:1673 ERROR TypeError: Cannot read property 'closestOnLine' of undefined
    at AboutPage.push../src/app/about/about.page.ts.AboutPage.ionViewDidEnter (about.page.ts:120)
    at HTMLElement.<anonymous> (angular-delegate.js:96)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3815)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLElement.globalZoneAwareCallback (zone.js:1566)
    at lifecycle (chunk-c9c4a2c9.js:143)

先貼代碼

<script type="text/javascript">
    //初始化地圖對象，加載地圖
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    var pos = [116.377904, 39.915423]
    var marker = new AMap.Marker({
        map: map,
        position: pos
    });
    var path = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ]
    var closestPositionOnLine  = AMap.GeometryUtil.closestOnLine(pos,path)

    var polyline = new AMap.Polyline({
        map: map,
        path: path,
        strokeColor:'red',
    });
    var polyline2 = new AMap.Polyline({
        map: map,
        strokeStyle:'dashed',
        strokeColor:'blue',
        strokeWeight:1,
        path: [pos,closestPositionOnLine]
    });
     new AMap.Text({
        text:'點線距離'+Math.round(AMap.GeometryUtil.distanceToLine(pos,path))+'米',
        position:[(pos[0]+closestPositionOnLine[0])/2,(pos[1]+closestPositionOnLine[1])/2],
        map:map,
        style:{'background-color':'#ccccff',
                'border-color':'green',
                'font-size':'12px'}
    })
    map.setFitView();
</script>

在下面這一句報的錯

var closestPositionOnLine = AMap.GeometryUtil.closestOnLine(pos,path)

於是找到引入包的地方看了一下，發現我引入的是1.4.1

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=我的key"></script>

於是我改成了1.4.9

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.9&key=我的key"></script>

成功