<template>
<div class="m-map">
<!-- <picker style="z-index: 9999;background: #4A9FF4;color: #FFFDEF;" @change="bindPickerChange" :value="index" :range="array">
<div
class="uni-input"
style="text-align: center;line-height: 40px;width: 40px;height: 40px;z-index: 999;background: #4A9FF4;border-radius: 60upx;position: fixed;top: 100upx;right: 32upx;"
>
分类
</div>
</picker> -->
<div id="js-container" class="map">正在加载中 ...</div>
</div>
</template>
<script>
const MapKey = '43fcce2baefbd309a4afe81279946689';
const MapCityName = '北京';
export default {
props: ['lat', 'lng', 'defaultV'],
data() {
return {
list: [],
address: undefined,
index: 0,
array: ['全部', '银行', '保险'],
placeSearch: null,
dragStatus: false,
AMapUI: null,
AMap: null
};
},
watch: {
defaultV() {
console.log(this.defaultV);
if (this.defaultV !== undefined) {
console.log(this.defaultV);
}
}
},
async created() {
function remoteLoad(url, hasCallback) {
return createScript(url);
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript(url) {
let scriptElement = document.createElement('script');
document.body.appendChild(scriptElement);
let promise = new Promise((resolve, reject) => {
scriptElement.addEventListener(
'load',
e => {
removeScript(scriptElement);
if (!hasCallback) {
resolve(e);
}
},
false
);
scriptElement.addEventListener(
'error',
e => {
removeScript(scriptElement);
reject(e);
},
false
);
if (hasCallback) {
window.____callback____ = function() {
resolve();
window.____callback____ = null;
};
}
});
if (hasCallback) {
url += '&callback=____callback____';
}
scriptElement.src = url;
return promise;
}
/**
* 移除script标签
* @param scriptElement script dom
*/
function removeScript(scriptElement) {
document.body.removeChild(scriptElement);
}
}
// 已载入高德地图API,则直接初始化地图
if (window.AMap && window.AMapUI) {
uni.request({
url: 'https://www.yunfucpa.com/manage/Wx/map/list',
method: 'GET',
success: res => {
this.list = res.data.data;
this.initMap();
}
});
} else {
await remoteLoad(`https://webapi.amap.com/maps?v=1.4.4&key=${MapKey}&plugin=AMap.Geocoder,AMap.PlaceSearch,AMap.ToolBar`);
await remoteLoad('https://webapi.amap.com/ui/1.0/main.js');
uni.request({
url: 'https://www.yunfucpa.com/manage/Wx/map/list',
method: 'GET',
success: res => {
this.list = res.data.data;
this.initMap();
}
});
}
},
methods: {
getData(industry) {
if (industry && industry != '全部') {
uni.request({
url: 'https://www.yunfucpa.com/manage/Wx/map/list?industry=' + industry,
method: 'GET',
success: res => {
this.list = res.data.data;
this.initMap();
}
});
} else {
uni.request({
url: 'https://www.yunfucpa.com/manage/Wx/map/list',
method: 'GET',
success: res => {
this.list = res.data.data;
}
});
}
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.target.value);
this.index = e.target.value;
this.getData(this.array[e.target.value]);
},
// 搜索
handleSearch() {
if (this.searchKey) {
this.placeSearch.search(this.searchKey);
}
},
// 实例化地图
initMap() {
let AMapUI = (this.AMapUI = window.AMapUI);
let AMap = (this.AMap = window.AMap);
let that = this;
AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
let mapConfig = {
zoom: 14,
center: [112.04851, 22.926136],
cityName: MapCityName
};
let map = new AMap.Map('js-container', mapConfig);
let list = this.list;
let markers = [];
for (var i = 0; i < list.length; i++) {
var marker = new AMap.Marker({
position: [list[i].lng, list[i].lat],
icon: new AMap.Icon({
image: 'https://www.yunfucpa.com/file/img/marker.png',
size: new AMap.Size(40, 40), //图标大小
imageSize: new AMap.Size(40, 40)
}),
offset: new AMap.Pixel(-23, -30)
});
marker.setMap(map);
// label默认蓝框白底左上角显示,样式className为:amap-marker-label
marker.setLabel({
offset: new AMap.Pixel(20, -30), //设置文本标注偏移量
content: "<div class='info' style='padding: 3px 5px;'>" + list[i].name + '</div>', //设置文本标注内容
direction: 'right' //设置文本标注方位
});
map.addControl(new AMap.ToolBar());
marker.positon = list[i].id;
//鼠标点击marker弹出自定义的信息窗体
marker.on('click', function(e) {
uni.request({
url: 'https://www.yunfucpa.com/manage/Wx/map/detail/' + e.target.positon,
method: 'GET',
success: res => {
console.error(res);
var data = res.data.data;
if (!res.data.data.logo) {
data.logo = 'https://www.yunfucpa.com/file/img/mem_11.jpg';
}
if (!res.data.data.phone) {
data.phone = '暂无联系电话';
}
//实例化信息窗体
var content = [];
content.push(
"<div id='close' style='color: #333333;font-size:16px;textAlign:center;margin-bottom:10px'><img src='" +
data.logo +
"' style='height:30px;border-radius:4px;margin-right:12px'></img>" +
data.name +
'</div>'
);
content.push("<div style='font-size: 12px;color: #898989;margin-bottom:6px'>地址:" + data.address + '</div>');
content.push("<div style='font-size: 12px;color: #898989;margin-bottom:6px'>电话:<a href='tel:" + data.phone + "'>" + data.phone + '</a></div>');
content.push(
"<div style='display:flex'><div style='float: left;background: #4A9FF4;margin: 0 0 0 5px;border-radius: 5px;width: 45%;text-align: center;line-height: 32px;' id='calls'>一键拨号</div><div style='float: left;background: #4A9FF4;margin: 0 0 0 5px;border-radius: 5px;width: 45%;text-align: center;line-height: 32px;' id='goPage'>一键导航</div></div>"
);
content.push(
"<div id='details' style='float: left;background: #4A9FF4;margin: 8px 0 0 5px;border-radius: 5px;width: 92%;text-align: center;line-height: 32px;'>机构详情查看</div>"
);
infoWindow.setContent(createInfoWindow(content.join('')));
infoWindow.open(map, e.lnglat);
setTimeout(function() {
var close = document.getElementById('close');
// 详情
close.addEventListener('click', function() {
map.clearInfoWindow();
});
var details = document.getElementById('details');
// 详情
details.addEventListener('click', function() {
uni.navigateTo({
url: '/pages/map/details?id=' + data.id
});
});
var calls = document.getElementById('calls');
// 拨打电话
calls.addEventListener('click', function() {
window.location.href = 'tel://' + data.phone;
});
var goPage = document.getElementById('goPage');
// 导航
goPage.addEventListener('click', function() {
marker.markOnAMAP({
position: e.lnglat
});
});
}, 500);
},
fail: () => {},
complete: () => {}
});
});
markers.push(marker);
}
map.on('click', function(e) {
map.clearInfoWindow();
});
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
offset: new AMap.Pixel(16, -30)
});
//构建自定义信息窗体
function createInfoWindow(content) {
var info = document.createElement('div');
info.style.background = '#FFFFFF';
info.style.width = '250px';
info.style.height = '170px';
info.style.textAlign = 'left';
info.style.color = '#FFFFFF';
info.style.padding = '16px';
info.innerHTML = content;
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
// 创建地图拖拽
let positionPicker = new PositionPicker({
mode: 'dragMarker', // 设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
map: map // 依赖地图对象
});
// 拖拽完成发送自定义 drag 事件
positionPicker.on('success', positionResult => {
this.$emit('drag', {
address:
positionResult.regeocode.addressComponent.district +
positionResult.regeocode.addressComponent.township +
positionResult.regeocode.addressComponent.street +
positionResult.regeocode.addressComponent.streetNumber,
lng: positionResult.position.lng,
lat: positionResult.position.lat
});
this.address = positionResult.address;
openInfo([positionResult.position.lng, positionResult.position.lat]);
});
if (this.lat && this.lng) {
mapConfig.center = [this.lng, this.lat];
positionPicker.start([this.lng, this.lat]);
map.panBy(0, 1);
}
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);
AMap.event.addListener(geolocation, 'error', onError);
function onComplete(data) {
// data是具体的定位信息
console.error(data);
// map.setCenter("")
}
function onError(data) {
// 定位出错
}
});
// 坐标-地址转换
var geocoder = new AMap.Geocoder({});
AMap.plugin(['AMap.Autocomplete'], function() {
// 输入提示
var autoOptions = {
input: 'complete'
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({}); // 构造地点查询类,注意:这里如果实例的时候设置了map,下面再自定义增加marker时,会导致marker点重复和相关的marker设置失效。
AMap.event.addListener(auto, 'select', select); // 注册监听,当选中某条记录时会触发
function select(e) {
positionPicker.start([e.poi.location.lng, e.poi.location.lat]);
map.panBy(0, 1);
openInfo([e.poi.location.lng, e.poi.location.lat]);
placeSearch.setCity(e.poi.adcode);
placeSearch.setCityLimit(true);
// placeSearch.search(e.poi.name, searchBack) // 关键字查询查询
}
});
// 启用工具条
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(
new AMap.ToolBar({
position: 'RB'
})
);
});
// 在指定位置打开信息窗体
function openInfo(lnglat) {
// console.log(that)
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
// outer.$emit('drag', {address: result.district + result.township + result.street + result.streetNumber, lng: lnglat['lng'], lat: lnglat['lat']})
// 地址
var address = result.regeocode.formattedAddress;
// 构建信息窗体中显示的内容
var info = [];
info.push("<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>详细地址</span>: " + address + '</p>');
info.push(
"<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>附近路口</span>: " +
result.regeocode.addressComponent.street +
result.regeocode.addressComponent.streetNumber +
'</p>'
);
info.push(
"<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>附近街道</span>: " +
result.regeocode.addressComponent.township +
'</p>'
);
info.push('</div></div>'); // 可以根据自己需要,将获取到POI信息进行传递
var infoWindow = new AMap.InfoWindow({
content: info.join(''), // 使用默认信息窗体框样式,显示信息内容
offset: new AMap.Pixel(0, -20)
});
infoWindow.open(map, lnglat);
} else {
alert(JSON.stringify(result));
}
});
}
// 启动拖放
// positionPicker.start()
});
}
}
};
</script>
<style>
.amap-marker-label {
background-color: rgb(255, 255, 255);
border: 1px dashed rgb(255, 204, 102) !important;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
.info-top {
position: relative;
background: none repeat scroll 0 0 #f9f9f9;
border-bottom: 1px solid #ccc;
border-radius: 5px 5px 0 0;
}
.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
.m-map {
width: 100%;
min-height: 100%;
position: relative;
}
.m-map .map {
width: 100%;
height: 720px;
text-align: center;
}
.m-map .search {
overflow: scroll;
position: absolute;
top: 10px;
left: 10px;
width: 500px;
height: 30px;
padding-left: 5px;
z-index: 1;
border: 1px solid #ccc;
line-height: 20px;
outline: none;
}
.m-map .result {
max-height: 300px;
overflow: auto;
margin-top: 10px;
}
</style>