|
|
<template>
|
|
|
<!--
|
|
|
:positionInfo="{
|
|
|
lng: 113.863823,
|
|
|
lat: 34.571367,
|
|
|
name: '服务中心',
|
|
|
desc: '河南省郑州市航空港区相州街29-60号（豫康新城-北区）',
|
|
|
containerName: 'mapContainer1',
|
|
|
picUrl:require('../../assets/bcSVG/服务中心.png')
|
|
|
}"
|
|
|
-->
|
|
|
<div :id="positionInfo.containerName">
|
|
|
<!-- <img :src="positionInfo.picUrl" alt="" v-show="isMapContainer" /> -->
|
|
|
<!-- <img src="../assets/bcSVG/服务中心.png" alt="" v-show="isMapContainer" /> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {
|
|
|
positionInfo: {
|
|
|
require: true,
|
|
|
},
|
|
|
},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
isMapContainer: false,
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
beforeCreate() {
|
|
|
let that = this;
|
|
|
var script = document.createElement("script");
|
|
|
script.type = "text/javascript";
|
|
|
script.src =
|
|
|
"https://webapi.amap.com/maps?v=1.4.15&key=44f4591aabba558514366f6e55f8d20e"; // 高德地图
|
|
|
document.body.appendChild(script);
|
|
|
setTimeout(function () {
|
|
|
var infoWindow,
|
|
|
map,
|
|
|
level = 12,
|
|
|
// center = { lng: 113.772207, lat: 34.757083 },
|
|
|
center = { lng: that.positionInfo.lng, lat: that.positionInfo.lat },
|
|
|
// features = [
|
|
|
// {
|
|
|
// icon: "cir",
|
|
|
// color: "red",
|
|
|
// name: "伯才科技有限公司",
|
|
|
// desc: "河南省郑州市郑东新区升龙广场2号楼A座",
|
|
|
// lnglat: {
|
|
|
// Q: 34.75720614600168,
|
|
|
// R: 113.77201218992474,
|
|
|
// lng: 113.772207,
|
|
|
// lat: 34.757083,
|
|
|
// },
|
|
|
// offset: { x: -9, y: -31 },
|
|
|
// type: "Marker",
|
|
|
// },
|
|
|
// ];
|
|
|
features = [
|
|
|
{
|
|
|
icon: "cir",
|
|
|
color: "red",
|
|
|
name: that.positionInfo.name,
|
|
|
desc: that.positionInfo.desc,
|
|
|
lnglat: {
|
|
|
Q: that.positionInfo.lat,
|
|
|
R: that.positionInfo.lng,
|
|
|
lng: that.positionInfo.lng,
|
|
|
lat: that.positionInfo.lat,
|
|
|
},
|
|
|
offset: { x: -9, y: -31 },
|
|
|
type: "Marker",
|
|
|
},
|
|
|
];
|
|
|
function loadFeatures() {
|
|
|
for (
|
|
|
var feature, data, i = 0, len = features.length, j, jl, path;
|
|
|
i < len;
|
|
|
i++
|
|
|
) {
|
|
|
data = features[i];
|
|
|
switch (data.type) {
|
|
|
case "Marker":
|
|
|
feature = new AMap.Marker({
|
|
|
map: map,
|
|
|
position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
|
|
|
zIndex: 3,
|
|
|
extData: data,
|
|
|
offset: new AMap.Pixel(data.offset.x, data.offset.y),
|
|
|
title: data.name,
|
|
|
content:
|
|
|
'<div class="icon icon-' +
|
|
|
data.icon +
|
|
|
" icon-" +
|
|
|
data.icon +
|
|
|
"-" +
|
|
|
data.color +
|
|
|
'"></div>',
|
|
|
});
|
|
|
break;
|
|
|
case "Polyline":
|
|
|
for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
|
|
|
path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
|
|
|
}
|
|
|
feature = new AMap.Polyline({
|
|
|
map: map,
|
|
|
path: path,
|
|
|
extData: data,
|
|
|
zIndex: 2,
|
|
|
strokeWeight: data.strokeWeight,
|
|
|
strokeColor: data.strokeColor,
|
|
|
strokeOpacity: data.strokeOpacity,
|
|
|
});
|
|
|
break;
|
|
|
case "Polygon":
|
|
|
for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
|
|
|
path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
|
|
|
}
|
|
|
feature = new AMap.Polygon({
|
|
|
map: map,
|
|
|
path: path,
|
|
|
extData: data,
|
|
|
zIndex: 1,
|
|
|
strokeWeight: data.strokeWeight,
|
|
|
strokeColor: data.strokeColor,
|
|
|
strokeOpacity: data.strokeOpacity,
|
|
|
fillColor: data.fillColor,
|
|
|
fillOpacity: data.fillOpacity,
|
|
|
});
|
|
|
break;
|
|
|
default:
|
|
|
feature = null;
|
|
|
}
|
|
|
if (feature) {
|
|
|
AMap.event.addListener(feature, "click", mapFeatureClick);
|
|
|
var infoWindow = new AMap.InfoWindow({
|
|
|
content:
|
|
|
"<div class='myinfowindow'><h5>" +
|
|
|
that.positionInfo.name +
|
|
|
"</h5><div>" +
|
|
|
that.positionInfo.desc +
|
|
|
"</div></div>", //信息窗体的内容
|
|
|
offset: new AMap.Pixel(1, -20),
|
|
|
});
|
|
|
infoWindow.open(map, feature.getPosition());
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function mapFeatureClick(e) {
|
|
|
if (!infoWindow) {
|
|
|
infoWindow = new AMap.InfoWindow({ autoMove: true, isCustom: false });
|
|
|
}
|
|
|
var extData = e.target.getExtData();
|
|
|
infoWindow.setContent(
|
|
|
"<div class='myinfowindow'><h5>" +
|
|
|
extData.name +
|
|
|
"</h5><div>" +
|
|
|
extData.desc +
|
|
|
"</div></div>"
|
|
|
);
|
|
|
infoWindow.open(map, e.lnglat);
|
|
|
}
|
|
|
// mapFeatureClick()
|
|
|
map = new AMap.Map(that.positionInfo.containerName, {
|
|
|
center: new AMap.LngLat(center.lng, center.lat),
|
|
|
level: level,
|
|
|
keyboardEnable: true,
|
|
|
dragEnable: true,
|
|
|
scrollWheel: true,
|
|
|
doubleClickZoom: true,
|
|
|
});
|
|
|
console.log(map);
|
|
|
loadFeatures();
|
|
|
map.on("complete", function () {
|
|
|
map.plugin(
|
|
|
["AMap.ToolBar", "AMap.OverView", "AMap.Scale"],
|
|
|
function () {
|
|
|
// map.addControl(new AMap.ToolBar({ ruler: true, direction: true, locate: false }));
|
|
|
map.addControl(new AMap.OverView({ isOpen: false }));
|
|
|
map.addControl(new AMap.Scale());
|
|
|
}
|
|
|
);
|
|
|
});
|
|
|
}, 200);
|
|
|
setTimeout(() => {
|
|
|
console.log(that.positionInfo.containerName);
|
|
|
let map1 = document.querySelector("#" + that.positionInfo.containerName);
|
|
|
// let map2 = document.querySelector("#mapContainer1");
|
|
|
console.log(map1);
|
|
|
console.log(map1.childNodes.length);
|
|
|
// console.log(map2.childNodes.length);
|
|
|
if (map1.childNodes.length <= 1) {
|
|
|
that.isMapContainer = true;
|
|
|
}
|
|
|
// if (map2.childNodes.length <= 1) {
|
|
|
// that.isMapContainer1 = true;
|
|
|
// }
|
|
|
// that.isMapContainer1 = true;
|
|
|
}, 1000);
|
|
|
},
|
|
|
created() {},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.amap-maps {
|
|
|
margin: 0 auto;
|
|
|
width: 200px;
|
|
|
height: 172px;
|
|
|
}
|
|
|
.amap-maps .icon {
|
|
|
width: 100px;
|
|
|
background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png)
|
|
|
no-repeat;
|
|
|
}
|
|
|
.amap-maps .icon-cir {
|
|
|
height: 31px;
|
|
|
width: 28px;
|
|
|
}
|
|
|
.amap-maps .icon-cir-red {
|
|
|
background-position: -11px -5px;
|
|
|
}
|
|
|
.amap-container {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.myinfowindow {
|
|
|
width: 240px;
|
|
|
min-height: 50px;
|
|
|
}
|
|
|
.myinfowindow h5 {
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
overflow: hidden;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
width: 220px;
|
|
|
text-overflow: ellipsis;
|
|
|
word-break: break-all;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.myinfowindow div {
|
|
|
margin-top: 10px;
|
|
|
min-height: 40px;
|
|
|
line-height: 20px;
|
|
|
font-size: 13px;
|
|
|
color: #6f6f6f;
|
|
|
}
|
|
|
.amap-info-content {
|
|
|
padding: 10px;
|
|
|
.myinfowindow {
|
|
|
width: 100px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
a {
|
|
|
right: 5px !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|