|
|
@@ -33,7 +33,8 @@ import {
|
|
|
watchEffect,
|
|
|
nextTick,
|
|
|
} from "vue";
|
|
|
-const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");
|
|
|
+const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");// 公司
|
|
|
+// const mapInit = loadBMap("jLS6RW3GdIGVIr555yfGGCaFK7otIGDl");
|
|
|
|
|
|
const props = defineProps({
|
|
|
fatherMessage: {},
|
|
|
@@ -58,9 +59,12 @@ const mapAddress = (flag) => {
|
|
|
};
|
|
|
|
|
|
const getList = () => {
|
|
|
+ console.log("调用了", address.value);
|
|
|
mapInit.then((BMap) => {
|
|
|
//创建地图实例,位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
|
|
|
map.value = new BMap.Map("map");
|
|
|
+ console.log(map.value);
|
|
|
+
|
|
|
var points;
|
|
|
// 创建点坐标
|
|
|
if (props.fatherMessage.lat && props.fatherMessage.lng) {
|
|
|
@@ -71,22 +75,19 @@ const getList = () => {
|
|
|
} else {
|
|
|
points = "江西";
|
|
|
}
|
|
|
- map.value.centerAndZoom(points, 16); // 初始化地图,设置城市和地图级别
|
|
|
+ map.value.centerAndZoom(points, 20); // 初始化地图,设置城市和地图级别
|
|
|
map.value.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
|
- // map.value.addOverlay(
|
|
|
- // new BMap.Marker({
|
|
|
- // lng: 114.97804777753186,
|
|
|
- // lat: 28.838700575036494,
|
|
|
- // })
|
|
|
- // );
|
|
|
+ map.value.addOverlay(new BMap.Marker(points)); // 添加标注
|
|
|
|
|
|
const ac = new BMap.Autocomplete({
|
|
|
input: "suggestId",
|
|
|
- location: map.value,
|
|
|
+ location:map.value,
|
|
|
});
|
|
|
+ ac.setInputValue(address.value)
|
|
|
//建立一个自动完成的对象
|
|
|
ac.addEventListener("onconfirm", function (e) {
|
|
|
//鼠标点击下拉列表后的事件
|
|
|
+ console.log(e);
|
|
|
const tempValue = e.item.value;
|
|
|
const searchValue =
|
|
|
tempValue.province +
|
|
|
@@ -113,29 +114,84 @@ const getList = () => {
|
|
|
})
|
|
|
);
|
|
|
// 地址逆解析(无法获取精确地址)
|
|
|
- // var geoc = new BMap.Geocoder();
|
|
|
- // var pt = e.Af;
|
|
|
- // var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
|
|
|
- // map.value.addOverlay(marker);
|
|
|
- // geoc.getLocation(pt, function (rs) {
|
|
|
- // var addComp = rs.addressComponents;
|
|
|
- // console.log(
|
|
|
- // addComp.province +
|
|
|
- // ", " +
|
|
|
- // addComp.city +
|
|
|
- // ", " +
|
|
|
- // addComp.district +
|
|
|
- // ", " +
|
|
|
- // addComp.street +
|
|
|
- // ", " +
|
|
|
- // addComp.streetNumber
|
|
|
- // );
|
|
|
- // });
|
|
|
+ var geoc = new BMap.Geocoder();
|
|
|
+ var pt = e.Af;
|
|
|
+ var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
|
|
|
+ map.value.addOverlay(marker);
|
|
|
+ geoc.getLocation(pt, function (rs) {
|
|
|
+ var addComp = rs.addressComponents;
|
|
|
+ console.log(
|
|
|
+ addComp.province +
|
|
|
+ ", " +
|
|
|
+ addComp.city +
|
|
|
+ ", " +
|
|
|
+ addComp.district +
|
|
|
+ ", " +
|
|
|
+ addComp.street +
|
|
|
+ ", " +
|
|
|
+ addComp.streetNumber
|
|
|
+ );
|
|
|
+ address.value =
|
|
|
+ addComp.province +
|
|
|
+ addComp.city +
|
|
|
+ addComp.district +
|
|
|
+ addComp.street +
|
|
|
+ addComp.streetNumber;
|
|
|
+ });
|
|
|
});
|
|
|
// map.value.removeEventListener("click", handleClick); // 移除当前点击点的经纬度事件监听
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+// 搜索下拉框数据展示
|
|
|
+const dataList = () => {
|
|
|
+ console.log("下拉框数据展示");
|
|
|
+ mapInit.then((BMap) => {
|
|
|
+ // const ac = new BMap.Autocomplete({
|
|
|
+ // input: "suggestId",
|
|
|
+ // location: map.value,
|
|
|
+ // });
|
|
|
+ //建立一个自动完成的对象
|
|
|
+ // ac.addEventListener("onconfirm", function (e) {
|
|
|
+ // //鼠标点击下拉列表后的事件
|
|
|
+ // console.log(e);
|
|
|
+
|
|
|
+ // const tempValue = e.item.value;
|
|
|
+ // const searchValue =
|
|
|
+ // tempValue.province +
|
|
|
+ // tempValue.city +
|
|
|
+ // tempValue.district +
|
|
|
+ // tempValue.street +
|
|
|
+ // tempValue.business;
|
|
|
+ // console.log(searchValue, "输入框选中的值");
|
|
|
+
|
|
|
+ // setPlace(BMap, map.value, searchValue);
|
|
|
+ // });
|
|
|
+ });
|
|
|
+};
|
|
|
+const movePoint = (BMap, map, latlng) => {
|
|
|
+ console.log("移动标记点");
|
|
|
+
|
|
|
+ map.clearOverlays(); //清除地图上所有覆盖物
|
|
|
+ //使用BMap命名空间下的Point类来创建一个坐标点
|
|
|
+ const point = new BMap.Point(latlng.lng, latlng.lat);
|
|
|
+ const marker = new BMap.Marker(point, {
|
|
|
+ enableDragging: true,
|
|
|
+ });
|
|
|
+ map.addOverlay(marker);
|
|
|
+ latlngToAddress(BMap, latlng);
|
|
|
+
|
|
|
+ // 覆盖物拖拽开始事件
|
|
|
+ marker.addEventListener("dragstart", function (e) {
|
|
|
+ // 清除一些覆盖物
|
|
|
+ console.log("[开始]", e);
|
|
|
+ });
|
|
|
+ // 覆盖物拖拽事件
|
|
|
+ marker.addEventListener("dragend", function () {
|
|
|
+ const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)
|
|
|
+ latlngToAddress(BMap, nowPoint);
|
|
|
+ });
|
|
|
+};
|
|
|
/**
|
|
|
* 根据输入框的值在地图上添加标记点
|
|
|
* @param
|
|
|
@@ -143,6 +199,8 @@ const getList = () => {
|
|
|
* searchValue:输入框下拉数据选中的值
|
|
|
* **/
|
|
|
const setPlace = (BMap, map, searchValue) => {
|
|
|
+ console.log("根据输入框的值在地图上添加标记点");
|
|
|
+
|
|
|
map.clearOverlays(); //清除地图上所有覆盖物
|
|
|
const local = new BMap.LocalSearch(map, {
|
|
|
//智能搜索
|
|
|
@@ -154,7 +212,7 @@ const setPlace = (BMap, map, searchValue) => {
|
|
|
|
|
|
map.centerAndZoom(pp, 21);
|
|
|
map.addOverlay(new BMap.Marker(pp)); //添加标注
|
|
|
- movePoint(BMap, map, res.Vr[0].point);
|
|
|
+ movePoint(BMap, map, res.Wr[0].point);
|
|
|
},
|
|
|
});
|
|
|
local.search(searchValue);
|
|
|
@@ -165,27 +223,7 @@ const setPlace = (BMap, map, searchValue) => {
|
|
|
* BMap:地图对象
|
|
|
* latlng:经纬度
|
|
|
* **/
|
|
|
-const movePoint = (BMap, map, latlng) => {
|
|
|
- map.clearOverlays(); //清除地图上所有覆盖物
|
|
|
- //使用BMap命名空间下的Point类来创建一个坐标点
|
|
|
- const point = new BMap.Point(latlng.lng, latlng.lat);
|
|
|
- const marker = new BMap.Marker(point, {
|
|
|
- enableDragging: true,
|
|
|
- });
|
|
|
- map.addOverlay(marker);
|
|
|
- latlngToAddress(BMap, latlng);
|
|
|
|
|
|
- // 覆盖物拖拽开始事件
|
|
|
- marker.addEventListener("dragstart", function (e) {
|
|
|
- // 清除一些覆盖物
|
|
|
- console.log("[开始]", e);
|
|
|
- });
|
|
|
- // 覆盖物拖拽事件
|
|
|
- marker.addEventListener("dragend", function () {
|
|
|
- const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)
|
|
|
- latlngToAddress(BMap, nowPoint);
|
|
|
- });
|
|
|
-};
|
|
|
/**
|
|
|
* 地址解析
|
|
|
* @param
|
|
|
@@ -193,6 +231,7 @@ const movePoint = (BMap, map, latlng) => {
|
|
|
* latlng:经纬度
|
|
|
* **/
|
|
|
const latlngToAddress = (BMap, latlng) => {
|
|
|
+ console.log("地址解析");
|
|
|
const geoc = new BMap.Geocoder();
|
|
|
geoc.getLocation(latlng, function (rs) {
|
|
|
console.log(rs.surroundingPois[0]);
|
|
|
@@ -202,6 +241,9 @@ const latlngToAddress = (BMap, latlng) => {
|
|
|
});
|
|
|
};
|
|
|
onBeforeMount(async () => {
|
|
|
+ address.value = props.fatherMessage.position;
|
|
|
+ lat.value = props.fatherMessage.lat;
|
|
|
+ lng.value = props.fatherMessage.lng;
|
|
|
getList();
|
|
|
console.log(props.fatherMessage);
|
|
|
});
|