请问该如何关联高德地图或者百度地图

Question

请问怎么将这个图片改成使用高德地图或者百度地图显示起点和终点，并显示路线

代码是这样的，请问怎么改，帮帮忙

<div class="list" :style='{"width":"100%","margin":"0","background":"none","order":"3"}'>
        <!-- 样式一 -->
        <div class="list1 index-pv1" :style='{"border":"1px solid #ffc800","padding":"30px 20px 20px","boxShadow":"0px 0px 0px #ddd,inset 0px 0px 30px 0px #fbf5db","margin":"20px 0 0 0","overflow":"hidden","borderRadius":"16px","flexWrap":"wrap","background":"#fff","display":"block","width":"calc(100% - 2px)","justifyContent":"space-around","height":"auto"}'>
            <div :style='{"margin":"0 0 30px 2%","borderRadius":"8px","flexWrap":"wrap","background":"none","display":"flex","width":"31%","position":"relative","float":"left","height":"auto"}' v-for="(item, index) in dataList" :key="index" @click="toDetail(item)" class="list-item animation-box">
                <img :style='{"cursor":"pointer","padding":"8px","borderColor":"#ffa100","margin":"0 0 10px","objectFit":"cover","borderRadius":"20%","borderWidth":"3px","background":"#f5f6cb","display":"block","width":"100%","borderStyle":"dotted dashed solid double","height":"274px"}' v-if="item.tupian && item.tupian.substr(0,4)=='http'" :src="item.tupian" class="image" />
                <img :style='{"cursor":"pointer","padding":"8px","borderColor":"#ffa100","margin":"0 0 10px","objectFit":"cover","borderRadius":"20%","borderWidth":"3px","background":"#f5f6cb","display":"block","width":"100%","borderStyle":"dotted dashed solid double","height":"274px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" class="image" />
                <div v-if="item.price" :style='{"padding":"0 10px","boxShadow":"1px 1px 1px #ddd","margin":"0 auto","color":"red","borderRadius":"20% ","textAlign":"center","background":"#f6f6f6","width":"76%","lineHeight":"30px","fontSize":"14px","order":"3"}' class="price"><span :style='{"fontSize":"12px"}'>￥</span>{{item.price}}</div>
                <div :style='{"padding":"0 10px","boxShadow":"0px 2px 0px #f1e288","margin":"0 auto 10px","whiteSpace":"nowrap","color":"#333","textAlign":"center","overflow":"hidden","borderRadius":"20% ","background":"#f6f6f6","width":"76%","lineHeight":"30px","fontSize":"14px","textOverflow":"ellipsis"}' class="name ">{{item.luxianmingcheng}}</div>
                <div :style='{"padding":"0 10px","boxShadow":"0px 2px 0px #f1e288","margin":"0 auto 10px","whiteSpace":"nowrap","color":"#333","textAlign":"center","overflow":"hidden","borderRadius":"20% ","background":"#f6f6f6","width":"76%","lineHeight":"30px","fontSize":"14px","textOverflow":"ellipsis"}' class="name ">{{item.jingdianmingcheng}}</div>
                <div :style='{"padding":"0 10px","boxShadow":"0px 2px 0px #f1e288","margin":"0 auto 10px","whiteSpace":"nowrap","color":"#333","textAlign":"center","overflow":"hidden","borderRadius":"20% ","background":"#f6f6f6","width":"76%","lineHeight":"30px","fontSize":"14px","textOverflow":"ellipsis"}' class="name ">{{item.chuxingfangshi}}</div>
            </div>
        </div>

        <!-- 样式二 -->
    </div>


    <el-pagination
      background
      class="pagination"
      :pager-count="7"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      prev-text="<"
      next-text=">"
      :hide-on-single-page="true"
      :layout='["total","prev","pager","next","sizes","jumper"].join()'
      :total="total"
      :style='{"padding":"0","margin":"10px auto","whiteSpace":"nowrap","color":"#333","width":"1200px","fontWeight":"500","order":"4"}'
      @current-change="curChange"
      @size-change="sizeChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    ></el-pagination>

  </div>
</div>
</template>

<script>
  export default {
    //数据集合
    data() {
      return {
        layouts: '',
        swiperIndex: -1,
        baseUrl: '',
        breadcrumbItem: [
          {
            name: '旅游路线'
          }
        ],
        formSearch: {
          luxianmingcheng: '',
          jingdianmingcheng: '',
          chuxingfangshi: '',
          qidian: '',
          tujingluduan: '',
        },
        fenlei: [],
        dataList: [],
        total: 1,
        pageSize: 12,
        pageSizes: [10,20,30,50],
        totalPage: 1,
        curFenlei: '全部',
        isPlain: false,
        indexQueryCondition: '',
          jingdianmingchengOptions: [],
          chuxingfangshiOptions: [],
        timeRange: []
      }
    },
    created() {
      this.indexQueryCondition = this.$route.query.indexQueryCondition ? this.$route.query.indexQueryCondition : '';
      this.baseUrl = this.$config.baseUrl;
      this.$http.get('option/lvyoujingdian/jingdianmingcheng').then(res => {
        if (res.data.code == 0) {
          this.jingdianmingchengOptions = res.data.data;
        }
      });
        this.chuxingfangshiOptions = '自由行,跟团游,游轮,其他'.split(',');
      this.getFenlei();
      this.getList(1, '全部');
    },
    //方法集合
    methods: {
      // add(path) {
      //   this.$router.push({path: path});
      // },
      getFenlei() {
        this.$http.get('option/lvyoujingdian/jingdianmingcheng').then(res => {
          if (res.data.code == 0) {
            this.fenlei = res.data.data;
          }
        });
      },
      getList(page, fenlei, ref = '') {
        if(fenlei == '全部') this.swiperIndex = -1;
        for(let i=0;i<this.fenlei.length;i++) {
            if(fenlei == this.fenlei[i]) {
                this.swiperIndex = i;
                break;
            }
        }
        this.curFenlei = fenlei;
        if (this.curFenlei == '全部') {
          this.isPlain = false;
        } else {
          this.isPlain = true;
        }
        let params = {page, limit: this.pageSize};
        let searchWhere = {};
        if (this.formSearch.luxianmingcheng != '') searchWhere.luxianmingcheng = '%' + this.formSearch.luxianmingcheng + '%';
        if (this.formSearch.jingdianmingcheng != '') searchWhere.jingdianmingcheng = this.formSearch.jingdianmingcheng;
        if (this.formSearch.chuxingfangshi != '') searchWhere.chuxingfangshi = this.formSearch.chuxingfangshi;
        if (this.formSearch.qidian != '') searchWhere.qidian = '%' + this.formSearch.qidian + '%';
        if (this.formSearch.tujingluduan != '') searchWhere.tujingluduan = '%' + this.formSearch.tujingluduan + '%';
        if (this.curFenlei != '全部') searchWhere.jingdianmingcheng = this.curFenlei;
        this.$http.get('lvyouluxian/list', {params: Object.assign(params, searchWhere)}).then(res => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.pageSize;
            this.totalPage = res.data.data.totalPage;

            this.pageSizes = [this.pageSize, this.pageSize*2, this.pageSize*3, this.pageSize*5];
          }
        });
      },
      curChange(page) {
        this.getList(page,this.curFenlei);
      },
      prevClick(page) {
        this.getList(page,this.curFenlei);
      },
      sizeChange(size){
        this.pageSize = size
        this.getList(1,this.curFenlei);
      },
      nextClick(page) {
        this.getList(page,this.curFenlei);
      },
      toDetail(item) {
        this.$router.push({path: '/index/lvyouluxianDetail', query: {detailObj: JSON.stringify(item)}});
      },
    }
  }
</script>

Answer 1

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7467938
• 这篇博客你也可以参考下：利用高德地图实现一个点是否在一个任意多边形内
• 除此之外, 这篇博客: 高德地图点击折线显示信息窗体解决方案中的 初始化地图并实现点击折线实现信息窗体 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 这一部分参考高德JS API开发文档，一下是vue项目中主要的几个配置文件
  1.public/index.html

  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
      <script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值"></script>
      <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    </head>
  

  该页面为public文件夹下的主页
  2.vue.config.js

  module.exports = {
      devServer: {
          port: 57103 // 端口号配置
      },
      configureWebpack: {
          externals: {
              'AMap': 'AMap' // 高德地图配置
          }
      }
  }
  

  3.Map.vue

  <template>
      <div id="container"></div>
  </template>
  
  <script>
      import AMap from 'AMap';
      export default {
          name: "Map",
          data(){
              return{
                  infoWindow:null,
                  infoWindowData:[],
                  pipelineDataList:[
                      {
                          path:[new AMap.LngLat(118.87,28.93),new AMap.LngLat(119.649506,29.089524)],
                          data:'衢州站至金华站'
                      },
                      {
                          path:[new AMap.LngLat(119.649506,29.089524),new AMap.LngLat(120.23629,29.71358)],
                          data:'金华站至诸暨站'
                      },
                      {
                          path:[new AMap.LngLat(120.23629,29.71358),new AMap.LngLat(120.27,30.17)],
                          data:'诸暨站至萧山站'
                      }
                  ]
              }
          },
          mounted(){
              this.map = new AMap.Map("container", {
                  resizeEnable: true,
                  center: [119.649506,29.089524],
                  zoom: 13,
                  viewMode:'3D'
              });
              this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
              for (let i=0;i<this.pipelineDataList.length;i++){
                      let polyline=new AMap.Polyline({
                          path:this.pipelineDataList[i].path,
                          strokeWeight: 6,
                          strokeColor: '#3366FF',
                          isOutline: true,
                          borderWeight: 1,
                          outlineColor: '#ffeeff',
                          extData:{
                              data:this.pipelineDataList[i].data
                          }
                      });
                      polyline.setMap(this.map);
                      polyline.on('click',this.polylineClick);
              }
          },
          methods:{
              polylineClick(e){
                  let position=[];
                  position.push(e.lnglat.lng);
                  position.push(e.lnglat.lat);
                  this.infoWindow = new AMap.InfoWindow({
                      content:'<div>id:'+e.target.w.extData.data+'</div><br/>'
                  });
                  this.infoWindow.open(this.map,position);
              }
          }
      }
  </script>
  
  <style scoped>
      #container{
          width: 500px;
          height: 500px;
      }
  </style>
  

  最终得到如下效果
  
  

• 您还可以看一下 张勇老师的初级到CS开发高手通用权限管理系统全程实录课程中的 利用委托刷新上级窗体内容小节, 巩固相关知识点