vue 中使用高德地图以及三级联动跳转到下一级区域
效果图1.安装插件:npm install vue-amap --save2.脚本初始化,main.js中import Vue from 'vue';import AMap from 'vue-amap';import App from './App.vue';import router from './router';Vue.use(AMa...
·
效果图
1.安装插件:
npm install vue-amap --save
2.脚本初始化,main.js中
import Vue from 'vue';
import AMap from 'vue-amap';
import App from './App.vue';
import router from './router';
Vue.use(AMap);
AMap.initAMapApiLoader({
key: '你的key',
//plugin 所用到的插件
plugin: plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.DistrictSearch','AMap.Geocoder']
});
const app = new Vue({ // eslint-disable-line
router,
render: h => h(App)
}).$mount('#app');3.在index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>gaode</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key='你的key'&plugin=AMap.Geocoder&plugin=AMap.DistrictSearch"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.项目中使用
<template lang="html">
<div id="amap-cointainer">
</div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
mounted() {
lazyAMapApiLoaderInstance.load().then(() => {
this.maps = new AMap.Map('amap-cointainer', {resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 4});
});
var that=this
var list=[ [116.376907,39.910967],
[116.384911,39.919505],
[116.40109,39.919728],
[116.411132,39.911408],
[116.412076,39.899135],
[116.402292,39.892353],
[116.3874,39.892518],
[116.376971,39.899267]]
that.GaodeMap(list)
that.mprovince();
},
methods:{
mprovince() {
// 行政区划查询
let opts = {
subdistrict: 1, // 返回下一级行政区
showbiz: false // 最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(opts); // 注意：需要使用插件同步下发功能才能这样直接使用
this.district.search("中国", (status, result) => {
if (status === "complete") {
this.getData(result.districtList[0]);
}
});
},
getData(data, level) {
debugger
let citySelect = document.getElementById("city");
let districtSelect = document.getElementById("district");
let areaSelect = document.getElementById("street");
let bounds = data.boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({
map: this.maps,
strokeWeight: 1,
strokeColor: "#0091ea",
fillColor: "#80d8ff",
fillOpacity: 0.2,
path: bounds[i]
});
this.polygons.push(polygon);
}
this.maps.setFitView(); // 地图自适应
}
debugger
// 清空下一级别的下拉列表
if (level === "province") {
citySelect.innerHTML = "";
districtSelect.innerHTML = "";
areaSelect.innerHTML = "";
} else if (level === "city") {
districtSelect.innerHTML = "";
areaSelect.innerHTML = "";
} else if (level === "district") {
areaSelect.innerHTML = "";
}
let subList = data.districtList;
if (subList) {
let contentSub = new Option("--请选择--");
let curlevel = subList[0].level;
let curList = document.querySelector("#" + curlevel);
curList.add(contentSub);
for (let i = 0, l = subList.length; i < l; i++) {
let name = subList[i].name;
let levelSub = subList[i].level;
let cityCode = subList[i].citycode;
contentSub = new Option(name);
contentSub.setAttribute("value", levelSub);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
curList.add(contentSub);
}
}
},
mapsearch(e) {
// 清除地图上所有覆盖物
// obj.srcElement.options.selectedIndex
;
let that = this;
var obj = e.currentTarget;
for (let i = 0, l = that.polygons.length; i < l; i++) {
that.polygons[i].setMap(null);
}
debugger
// let option = obj.srcElement[obj.srcElement.options.selectedIndex]
var option = obj[obj.options.selectedIndex];
var keyword = option.text; //关键字
var adcode = option.adcode;
that.district.setLevel(option.value); // 行政区级别
that.district.setExtensions("all");
// 行政区查询
// 按照adcode进行查询可以保证数据返回的唯一性
that.district.search(adcode, function(status, result) {
if (status === "complete") {
that.getData(result.districtList[0], obj.id);
}
});
},
setCenter(e) {
var that = this;
var obj = e.target;
obj[obj.options.selectedIndex].center;
debugger;
that.maps.setCenter(obj[obj.options.selectedIndex].center);
},
GaodeMap(list) {
var that = this;
var map= that.maps;
function StructureTypefunc(DataSerial) {
for (let i = 0; i < that.StructureTypeArr.length; i++) {
if (DataSerial == that.StructureTypeArr[i].DataSerial) {
return that.StructureTypeArr[i].DictData;
}
}
}
var markers = [];
var positions = list;
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0, marker; i < positions.length; i++) {
marker = new AMap.Marker({
map: map,
icon:
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
clickable: true,
position: positions[i].point
});
marker.id = positions[i].bridgeid;
marker.setTitle(
positions[i].BridgeName +
positions[i].BridgeSerial +
"\n" +
"点击查看详情"
);
marker.content = 'content';
marker.on("click", markerClick);
marker.emit("click", { target: marker });
markers.push(marker);
that.closeInfoWindow();
}
function markerClick(e) {
e.target.id;
// e.target.content=info( e.target.id)
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
$("body").on("click", "#tiao", function(event) {
var id = event.target.getAttribute("data-name");
that.$router.push({ name: "RealMonitor", query: { id: id } });
});
var num = 0;
$("body").on("click", "#left", function(event) {
num--;
if (num < 0) {
num = 0;
return;
} else {
$("#img").css("transform", "translate(-" + num * 60 + "px)");
}
});
$("body").on("mouseover", ".imgcontent", function(e) {
var path = e.target.src;
$("#bigimgbox").css("display", "block");
$("#bimgs").attr("src", path);
});
$("body").on("mouseleave", ".imgcontent", function(e) {
$("#bigimgbox").css("display", "none");
});
$("body").on("click", "#right", function(event) {
num++;
if (num < $("#img img").length) {
$("#img").css("transform", "translate(-" + num * 60 + "px)");
// $(this).siblings('div').find('.infoImg').css("transform", 'translate(-' + 200 * frame + 'px)')
} else if (num >= $("#img img").length) {
num = $("#img img").length - 1;
return;
}
});
},
closeInfoWindow() {
var that = this;
// that.maps.clearInfoWindow();
},
},
destroyed() {
if(!!this.maps){
this.maps.destroy();
}
}
};
</script>
<style lang="css">
#amap-cointainer {
height: 200px;
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献9条内容
所有评论(0)