60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div id="index-map" style="width: 100%;height:100%;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'JhbigscreenMap',
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(this.initMap())
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
initMap() {
|
||
|
|
var map = new BMapGL.Map("index-map");
|
||
|
|
//创建点坐标
|
||
|
|
let point = new BMapGL.Point(116.404, 39.915);
|
||
|
|
//初始化地图，设置中心点坐标和地图级别
|
||
|
|
map.centerAndZoom(point, 15);
|
||
|
|
//创建标注
|
||
|
|
let initMarker = new BMapGL.Marker(point);
|
||
|
|
//向地图中添加单个覆盖物时会触发此事件
|
||
|
|
map.addOverlay(initMarker);
|
||
|
|
//开启标注拖拽功能
|
||
|
|
initMarker.enableDragging();
|
||
|
|
//将标注点移动到中心位置
|
||
|
|
|
||
|
|
|
||
|
|
//添加地图默认控件
|
||
|
|
//map.addControl(new BMapGL.NavigationControl());
|
||
|
|
//开启鼠标滚轮缩放
|
||
|
|
|
||
|
|
var myGeo = new BMapGL.Geocoder();
|
||
|
|
// 将地址解析结果显示在地图上，并调整地图视野
|
||
|
|
myGeo.getPoint('经河新城', function (point) {
|
||
|
|
if (point) {
|
||
|
|
console.log("--->",point)
|
||
|
|
map.centerAndZoom(point, 16);
|
||
|
|
map.addOverlay(new BMapGL.Marker(point, { title: '经河新城' }))
|
||
|
|
map.enableScrollWheelZoom(true);
|
||
|
|
map.setHeading(64.5); //设置地图旋转角度
|
||
|
|
map.setTilt(73); //设置地图的倾斜角度
|
||
|
|
} else {
|
||
|
|
alert('您选择的地址没有解析到结果！');
|
||
|
|
}
|
||
|
|
}, '陕西省')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|