高德地图创建航线

一、下载高德包

npm i @amap/amap-jsapi-loader -S

二、在index.html中引入文件

三、在当前显示地图的vue文件引入地图并且对其进行初始化：

//引入地图
import AMapLoader from '@amap/amap-jsapi-loader'
onMounted(()=>{
	init()
})
const map = ref(null)
//初始化地图
const init = () => {
	window._AMapSecurityConfig = {
        securityJsCode: 'xxx',
    }
    //创建地图
    AMapLoader.load({
        key: 'xxx',
        version: '2.0',
        plugins: [
            'AMap.Scale',
            'AMap.ToolBar',
            'AMap.PolylineEditor',
            'AMap.MapboxVectorTileLayer',
            'AMap.ControlBar',
        ],
    }).then(res=>{
        map.value = new AMap.Map('container', {
            zoom: 17,
            center: [116.397428, 39.90923],
            viewMode: '3D', //开启3D视图,默认为关闭
            pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
        })
    })
}

四、在html添加加号按钮

<button @click="add">
    <img alt="" class="btn1Img" src="../../assets/images/btn1Img.png" />
</button>

五、在js中添加add方法，用来添加航线的效果

const polyline = ref(null)
const polyEditor = ref(null)
const add = () => {
	//添加最初始的默认显示的点标记
	const location_js = this.map.getCenter()
    //存取经纬度
	let location = [location_js.lng, location_js.lat]
    //创建折线实例
    let path = []
    //判断是否有折现，如果有那就把经纬度加进去，没有就关闭折线
    if (!polyEditor.value) {
        path = [location]
    } else {
        path = polyEditor.value.getTarget().getPath()
        path.push(location)

        polyEditor.value.getTarget().hide()
        map.value.remove(polyEditor.value.getTarget())
       	polyEditor.value.close()
        polyEditor.value.destroy()
    }
    //创建航线
    polyline.value = new AMap.Polyline({
        path: path,
        zIndex: 1,
        showDir: true,
        strokeColor: 'SpringGreen',
        strokeOpacity: 0.5, //线透明度
        strokeWeight: 9, //线宽
    })
    //将折线添加至地图实例
    map.value.add(polyline.value)
    polyEditor.value = new AMap.PolylineEditor(map.value, polyline.value, {
        midControlPoint: {
            radius: 10
        },
        controlPoint: {
            radius: 10
        },
    })
    polyEditor.value.open()
}

效果如下图所示：

！！！！！

注意：本文归作者所有，未经作者允许，不得转载