高德地图 JS API 结合VUE 展示公交线路示例

努力学习~冲鸭

于 2022-05-09 17:19:33 发布

阅读量1.1k

点赞数 1

分类专栏：高德地图文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/keke11211/article/details/124670756

版权

这篇博客介绍了如何在Vue项目中使用AMAP JSAPI Loader库来安装和加载高德地图，并实现线路搜索与展示。首先，通过npm安装依赖，然后在组件中初始化地图，设置中心点和缩放级别。接着，利用LineSearch插件进行线路搜索，获取并绘制公交线路。最后，通过Marker和Polyline绘制起点、终点和路径，使地图显示完整的公交线路效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制一条线路效果图：

1. 安装：

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

2. 代码：

<template>
    <div class="amap-wrapper">
        <div id="container" class="amap-box"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            map:null,
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap(){
            AMapLoader.load({
                key:"请填写自己的Key值", // 申请好的Web端开发者Key，首次调用 load 时必填
                version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins:['AMap.LineSearch'],       // 需要使用的的插件列表，如比例尺'AMap

最低0.47元/天解锁文章