Commit 9206a28d authored by 黄奎's avatar 黄奎
parents a1122950 1a3d4b71
......@@ -13,6 +13,5 @@
</body>
</html>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OV7BZ-ZT3HP-6W3DE-LKHM3-RSYRV-ULFZV"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?key=&v=1.1&services=true&s=1"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20240731110958"></script>
<!-- 腾讯地图 -->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>
<style scoped>
.card {width: 100vm;
height: 320px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
</style>
<template>
<div>
<el-form label-width="80px" size="small">
<el-row>
<el-col :span="24">
<el-form-item label="地址搜索">
<el-input placeholder="请输入具体地址" clearable
@keyup.enter.native="getLocalSearch" v-model="mapKeyword">
<el-button @click="getLocalSearch" slot="append" icon="el-icon-search">
</el-button>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="地址">
<el-select v-model="AddressId" filterable placeholder="请选择"
v-if="searchResults.length>0" @change="getAddress">
<el-option
v-for="item in searchResults"
:key="item.uid"
:label="item.address"
:value="item.uid">
</el-option>
</el-select>
<el-input disabled v-model="newAddress" v-else></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="经度">
<el-input disabled v-model="Lng">
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="纬度">
<el-input disabled v-model="Lat">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="card" :id="`baidu-map`"></div>
</div>
</template>
<script>
export default {
props:[""],
data() {
return {
center:{
Lng: 116.294625,
Lat: 39.961627,
},
Lng: '',
Lat: '',
map: null,
mapKeyword: '',
newAddress: '',
AddressId: '',
searchResults: []
}
},
watch: {
mapKeyword:{
handler(newValue,onldValue) {
this.center.Address = newValue
},
}
},
created() {
},
mounted() {
this.createMap();
this.addMarker();
this.addLabel()
},
methods: {
getAddress(){
let list = this.searchResults.filter(x=>{
return x.uid==this.AddressId
})
console.log(list,'-----222222222')
this.newAddress = list[0].address
},
createMap() {
if (this.map) {
this.map.clearOverlays()
}
let map = new BMap.Map(`baidu-map`); // 创建地图实例
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point); //标记点
map.addOverlay(marker);
this.map = map;
},
addMarker() {
let icon = '';
var myIcon = new BMap.Icon(icon, new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMap.Point(this.center.Lng, this.center.Lat);
var content = this.center.Address;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(10, -60), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function (e) {
// alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "18px",
border: "0 solid #1E90FF",
padding: '0 5px',
borderRadius: '3px',
});
},
getLocalSearch(){
if(this.mapKeyword!='') return
let that = this
let local = new BMap.LocalSearch(that.map, {
renderOptions: {map: that.map, autoViewport: false},
onSearchComplete: (results) => {
if(results&&results.as&&results.as.length>0){
that.searchResults = results.as;
that.center.Lng = results.as[0].point.lng
that.center.Lat = results.as[0].point.lat
let map = new BMap.Map(`baidu-map`);
var point = new BMap.Point(that.center.Lng, that.center.Lat);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true)
}else{
console.error('地址搜索失败');
}
}
});
local.search(this.mapKeyword);
// var point = new BMap.Point(that.center.Lng, that.center.Lat);
// local.searchNearby(that.mapKeyword,'',0);
},
},
}
</script>
<template>
<div v-loading="pageloading" class="editVehicle">
<div class="head-title">
<span @click="CommonJump('VehicleManagement')" class="point"
:class="[!ID?'blue':'']"
<span @click="CommonJump(isCarrier?'BuildingServiceManager':'BuildingManager')" class="blue point"
>{{isCarrier?'载体':'楼宇'}}管理</span
>
/ <span class="point" :class="[ID?'blue':'']">编辑{{isCarrier?'载体':'楼宇'}}</span>
/ <span>{{ID?'编辑':'新增'}}{{isCarrier?'载体':'楼宇'}}</span>
</div>
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
<el-card shadow="never" style="margin-top: 10px" class="box-card">
......@@ -612,7 +611,6 @@
import ChooseImg from "@/components/global/ChooseImg.vue";
import Choosevideo from "@/components/global/Choosevideo.vue";
import commonMap from "@/components/common/commonMap.vue";
import baiduMap from "@/components/common/baiduMap.vue";
import draggable from "vuedraggable";
export default {
......@@ -864,7 +862,6 @@ export default {
Choosevideo,
commonMap,
draggable,
baiduMap,
},
created() {
this.isCarrier = this.$route.query.isCarrier
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment