请问该如何关联高德地图或者百度地图
请问怎么将这个图片改成使用高德地图或者百度地图显示起点和终点，并显示路线
代码是这样的，请问怎么改，帮帮忙
<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>
- 帮你找了个相似的问题, 你可以看下: 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.jsmodule.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开发高手通用权限管理系统全程实录课程中的 利用委托刷新上级窗体内容小节, 巩固相关知识点