2、百度地图API:http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
搜索
3、Demo
clickable
clearable
v-model="currentValue"
:placeholder="placeholder"
>
color="#1989fa"
:name="mapShow?'arrow-up':'arrow-down'"
@click="mapShow=!mapShow"
/>
color="#1989fa"
:name="mapShow?'arrow-up':'location-o'"
@click="mapShow=!mapShow"
/>
v-show="mapShow"
ref="VeBmapRef"
:settings="chartSettings"
:series="chartSeries"
:tooltip="chartTooltip"
:after-set-option-once="afterSet"
>
v-for="(r,i) in address.searchList"
:key="i"
:label="r.address"
@click="searchListSelectFn(r,i)"
>
import Vue from "vue";
import VeBmap from "v-charts/lib/bmap.common";
export default {
components: {
VeBmap,
},
data() {
this.chartSettings = {
key: "申请的百度地图key",
bmap: {
// 百度地图中心经纬度
// center: [116.396428,39.917614],
// 百度地图缩放
zoom: 14,
// 是否开启拖拽缩放,可以只设置 'scale' 或者 'move'
roam: true,
// 百度地图的自定义样式,见 http://developer.baidu.com/map/jsdevelop-11.htm
mapStyle: {},
},
};
this.chartTooltip = { show: true };
return {
map: null, //百度地图实例对象
chartSeries: [
{
type: "scatter",
// 使用百度地图坐标系
coordinateSystem: "bmap",
// 数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]
// data: [[120, 30, 1]],
},
],
name: "",
code: "",
id: "",
align: "right",
width: "100%",
currentValue: "",
displayValue: "",
address: {
// 经纬坐标
point: {
lng: 116.416315,
lat: 39.944773,
},
// 五级街道
obj: {
streetNumber: "甲10号",
street: "中华路",
district: "东城区",
city: "北京市",
province: "北京市",
},
// 检索结果
searchList: [],
},
addressSearchSelectIndex: -1,
zoom: 19,
markOverlays: [],
mapShow: false,
};
},
computed: {
placeholder() {
if (this.config.placeholder) {
return this.config.placeholder;
}
if (!this.final_editable) {
return "";
}
if (this.required) {
return "必填";
}
return "地图选点 或 手动输入";
},
},
watch: {
"address.obj": {
handler(newValue) {
console.log(newValue);
let str = "";
if (newValue) {
if (newValue.province) {
str += newValue.province;
}
if (newValue.city) {
str += " " + newValue.city;
}
if (newValue.district) {
str += " " + newValue.district;
}
if (newValue.street) {
str += " " + newValue.street;
}
if (newValue.streetNumber) {
str += " " + newValue.streetNumber;
}
}
this.currentValue = str;
},
deep: true,
},
mapShow(newValue) {
if (newValue) {
this.$nextTick((e) => {
this.localSearch();
});
}
},
},
created() {
this.width = document.documentElement.clientWidth + "px";
},
methods: {
getRealValue() {
return this.currentValue;
},
getDisplayValue() {
return this.address.point.lng + "," + this.address.point.lat;
},
setRealValue(value) {
this.currentValue = String(value);
},
setDisplayValue(value) {
this.displayValue = value;
if (typeof value == "string" && value.indexOf(",") > 0) {
let ar = value.split(",");
this.address.point.lng = ar[0] || 0;
this.address.point.lat = ar[1] || 0;
}
},
afterSet(echarts) {
let that = this;
// 获取百度地图实例
let map = echarts.getModel().getComponent("bmap").getBMap();
this.map = map;
// 使用百度地图自带的控件
map.addControl(new window.BMap.MapTypeControl());
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(
new window.BMap.Point(116.416315, 39.944773),
that.zoom
);
//开启鼠标滚轮缩放
//this.map.enableScrollWheelZoom(true);
// 初始化定位当前ip的城市
this.getLocalCity();
//地图点击事件
map.addEventListener("click", (e) => {
if (!this.final_editable) {
return;
}
this.address.point = e.point;
console.log(e);
that.address.searchList = [];
this.markPoint(e.point);
this.getAddress();
});
// 添加定位控件
var geoCtrl = new BMap.GeolocationControl({
showAddressBar: true, //是否显示
enableAutoLocation: false, //首次是否进行自动定位
offset: new BMap.Size(0, 25),
//, locationIcon : icon //定位的icon图标
});
//监听定位成功事件
geoCtrl.addEventListener("locationSuccess", function (r) {
console.log(r);
that.address.point = r.point;
that.markPoint(r.point, "当前", true);
that.getAddress();
that.address.searchList = [];
});
//监听定位失败事件
geoCtrl.addEventListener("locationError", function (e) {
console.log(e);
});
// 将定位控件添加到地图
map.addControl(geoCtrl);
},
// 解析地址
getAddress() {
if (!this.final_editable) {
return;
}
this.currentValue = "";
this.placeholder = "解析地址中";
let geoc = new window.BMap.Geocoder();
geoc.getLocation(this.address.point, (rs) => {
console.log("getAddress", rs);
this.address.obj = rs.addressComponents || {};
this.placeholder = "";
});
},
// 检索
localSearch() {
let that = this;
that.mapShow = true;
// 百度地图API功能
var map = this.map;
map.centerAndZoom(
new BMap.Point(this.address.point.lng, this.address.point.lat),
that.zoom
);
var options = {
onSearchComplete: function (results) {
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
// 判断状态是否正确
var s = [];
for (var i = 0; i < results.getCurrentNumPois(); i++) {
let __address = results.getPoi(i);
s.push(__address);
that.markPoint(__address.pointN, __address.title, i == 0, i == 0);
that.addressSearchSelectIndex = 0;
}
that.address.searchList = [].concat(s);
console.log(that.address.searchList);
}
},
};
var local = new BMap.LocalSearch(map, options);
local.search(this.currentValue);
},
// 点击检索结果
searchListSelectFn(r, i) {
this.addressSearchSelectIndex = i;
if (this.final_editable) {
this.currentValue = r.address;
}
this.address.point = r.pointN;
this.toPoint(r.pointN);
},
// 用ip定位到城市
getLocalCity() {
let that = this;
// 百度地图API功能
let map = this.map;
let BMap = window.BMap;
var myCity = new BMap.LocalCity();
myCity.get((result) => {
that.address.point = result.center;
map.setCenter(result.name);
});
},
clearAllOverlays() {
// 百度地图API功能
let map = this.map;
this.markOverlays.forEach((overlay) => {
map.removeOverlay(overlay);
});
},
markPoint(point, label = "", go = false, doClear = true) {
// 百度地图API功能
let map = this.map;
if (doClear) {
this.clearAllOverlays();
}
var overlay = new BMap.Marker(point);
if (label) overlay.setLabel(this.getLabel(label));
map.addOverlay(overlay);
this.markOverlays.push(overlay);
if (go) {
this.toPoint(point);
}
},
/**
* 画圆
* point 圆心 经纬度
* radius 半径,单位/米
*/
markCircle(point, radius) {
console.log(point);
// 百度地图API功能
let map = this.map;
//创建圆对象
let circle = new BMap.Circle(point, radius, {
strokeColor: "blue",
strokeWeight: 1,
fillColor: "#E2E8F1",
fillOpacity: 0.6,
});
console.log(circle);
//画到地图上面
map.addOverlay(circle);
console.log(circle.getRadius());
},
getLabel(content) {
let fontSize = 12;
let len = content.length * fontSize;
//左偏移 右偏移
var labelStyle = {
color: "#fff",
backgroundColor: "#333333",
border: "0",
fontSize: fontSize + "px",
width: len + "px",
opacity: "0.8",
textAlign: "center",
verticalAlign: "center",
borderRadius: "2px",
whiteSpace: "normal",
wordWrap: "break-word",
padding: "2px 4px",
};
//用于设置样式
var spanA = "";
//不同数字长度需要设置不同的样式。
var offsetSize = new BMap.Size(-len / 2, -25);
var label = new BMap.Label(content + spanA, {
offset: offsetSize,
});
label.setStyle(labelStyle);
return label;
},
toPoint(point) {
// 百度地图API功能
let map = this.map;
map.panTo(point);
},
// 用了地图的控件,此方法没有用了 // 用GPS定位到当前(需要浏览器开启定位)
getCurrentPosition() {
let that = this;
// 百度地图API功能
let map = this.map;
let BMap = window.BMap;
let geolocation = new BMap.Geolocation();
that.currentValue = "";
that.placeholder = "定位中";
geolocation.getCurrentPosition(
function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
that.address.point = r.point;
that.markPoint(r.point, "当前", true);
that.getAddress();
} else {
that.$toast("failed" + this.getStatus());
that.currentValue = "";
}
},
{ enableHighAccuracy: true }
);
},
},
};
vue地图百度地图vchartsDemo
本文链接: http://www.nanshanqiao.com/zz_article/59.html暂无评论
评论