如果直接添加调用的话会报 xxxis not defined at HTMLAnchorElement.onclick
HTMLAnchorElement:接口表示超链接元素,并提供一些特别的属性和方法(除了那些继承自普通 HTMLElement对象接口的之外)以用于操作这些元素的布局和显示。
这时HTMLAnchorElement 找不到定义的点击事件 需要初始化的时候加在 window里面
<template>
<div class="mapmain">
<van-row>
<van-col span="12">
<button
v-bind:class="[isActive ? 'myorder_active' : 'disActive']"
@click="xq"
>
分公司
</button>
</van-col>
<van-col span="12">
<button
v-bind:class="[lsActive ? 'myorder_active' : 'disActive']"
@click="ly"
>
分理处
</button>
</van-col>
</van-row>
<!-- <div id="pickerBox">
<input id="pickerInput" placeholder="请输入关键字选取地点" />
<div id="poiInfo"></div>
</div> -->
<div id="container">
<!-- <div id="centerCoord"></div> -->
</div>
</div>
</template>
<script>
import {
queryCityBranch, //分理处
queryAreaBr, //分公司
} from "@/api/getData";
import AMap from "AMap"; //在页面中引入高德地图
import AMapUI from "AMapUI";
import { Toast } from "vant";
export default {
name: "mapmain",
data() {
return {
city: "郑州",
map: "",
infoWindow: "",
isActive: false,
lsActive: true,
thisPosition: {
address: "",
lng: "",
lat: "",
city: "",
citycode: "",
},
flc: [],
};
},
methods: {
//
xq() {
this.flc.length = 0;
this.isActive = false;
this.lsActive = true;
this.getqueryAreaBr();
},
ly() {
this.flc.length = 0;
this.isActive = true;
this.lsActive = false;
this.getqueryCityBranch();
this.loadmap()
},
loadmap() {
let that = this;
// 分公司
if (!this.isActive) {
// alert(222)
that.map = new AMap.Map("container",{resizeEnable: true});
}
// 分理处
if (!this.lsActive) {
that.map = new AMap.Map("container",{resizeEnable: true});
}
// that.map.clearMap(); // 清除地图覆盖物
//构建点坐标 设置点标记的文本标签
var lnglats = this.flc;
// console.log(lnglats)
// 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)});
for (var i = 0, marker; i < lnglats.length; i++) {
let markers =Array.from([lnglats[i].lng,lnglats[i].lat])
var marker = new AMap.Marker({
position: markers,
map: that.map
});
// let tel=lnglats[i].tel;
marker.content = lnglats[i].name+"<a id='cell' onclick='Phone(window)' style='color: #1d9beb;'>"+lnglats[i].tel +" </a>"+ (lnglats[i].address==null?" ":lnglats[i].address);
marker.on('click', markerClick);
marker.emit('click', {target: marker});
}
// 点击事件
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(that.map, e.target.getPosition());
}
that.map.setFitView();
},
// 点击弹出信息
Phone (){
let val =document.getElementById('cell').innerText;
window.location.href = 'tel:'+val;
// console.log(val,"222222")
},
// 分理处数据加载
getqueryCityBranch() {
queryCityBranch().then((res) => {
// console.log(res.data, "分理处");
if (res.data.success) {
let arr = res.data.data;
let arr2 = [],
obj = {};
for (let i = 0; i < arr.length; i++) {
if (arr[i].lat && arr[i].lng) {
if (
arr[i].lat <= 90 &&
arr[i].lat >= 0 &&
arr[i].lng <= 180 &&
arr[i].lng >= 0
) {
// obj.position = [arr[i].lng, arr[i].lat];
this.flc.push(
arr[i]
);
}
// console.log(obj)
// this.flc.push(obj);
}
}
// console.log(this.flc, "flc分理处");
this.loadmap(); //加载地图和相关组件
}
});
},
getqueryAreaBr() {
queryAreaBr().then((res) => {
// console.log(res.data, "分公司");
if (res.data.success) {
let arr = res.data.data;
let arr2 = [],
obj = {};
for (let i = 0; i < arr.length; i++) {
if (arr[i].lat && arr[i].lng) {
if (
arr[i].lat <= 90 &&
arr[i].lat >= 0 &&
arr[i].lng <= 180 &&
arr[i].lng >= 0
) {
this.flc.push(
arr[i]
);
}
}
}
// console.log(this.flc, "分公司flc");
this.loadmap(); //加载地图和相关组件
}
});
},
// 分公司加载
},
created() {},
mounted() {
this.getqueryAreaBr();
let _this = this;
// console.log(this)
// window.Close = _this.Close;
window.Phone=_this.Phone;
// _this.Phone();
console.log(window)
},
};
</script>
<style lang="less" scoped >
html,
body,
.mapmain {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: calc(100% - 2.5rem);
overflow-y: scroll;
}
.map_text {
width: 3rem;
height: 500px;
/* position: absolute; left: 46px; top: 146px; */
background: white;
}
#container.amap-icon img {
width: 25px;
height: 34px;
}
#pickerBox {
margin: 0.5rem 0;
// width: 300px;
height: 30px;
line-height: 30px;
position: relative;
font-size: 14px;
}
#pickerInput {
// width: 178px;
height: 24px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 5px;
position: absolute;
}
.myorder_active {
width: 100%;
height: 2.5rem;
color: black;
background: white;
border: 1px solid #ededed;
}
.disActive {
width: 100%;
height: 2.5rem;
background: #1d9beb;
border: 1px solid #1d9beb;
color: #fff;
}
.callPhone{
background: aqua;
color: #1d9beb;
}
</style>