You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.2 KiB
122 lines
2.2 KiB
<template>
|
|
<div class="div_total"
|
|
:style="{height:mapHeight+'px'}">
|
|
<div class="div_left">
|
|
<div class="div_search">
|
|
<el-input placeholder="输入要搜索的名称"></el-input>
|
|
<el-button type="primary"
|
|
icon="el-icon-search"
|
|
circle
|
|
@click="searchMap"></el-button>
|
|
|
|
</div>
|
|
<div class="map"
|
|
id="app">
|
|
</div>
|
|
</div>
|
|
<div class="div_right"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
|
|
//定义事件处理方法
|
|
var clickHandler = function (evt) {
|
|
var lat = evt.latLng.getLat().toFixed(6);
|
|
var lng = evt.latLng.getLng().toFixed(6);
|
|
console.log("您点击的的坐标是：" + lat + "," + lng);
|
|
}
|
|
|
|
// 定义地图中心点坐标
|
|
var center = new window.TMap.LatLng(39.984120, 116.307484)
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图
|
|
var map
|
|
var search
|
|
var markers
|
|
var infoWindowList = Array(10);
|
|
|
|
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
|
|
async mounted () {
|
|
this.initMap();
|
|
|
|
},
|
|
computed: {
|
|
mapHeight () {
|
|
|
|
return this.clientHeight - 130;
|
|
|
|
},
|
|
...mapGetters(['clientHeight']),
|
|
},
|
|
|
|
methods: {
|
|
initMap () {
|
|
map = new window.TMap.Map(document.getElementById('app'), {
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 17.2, // 设置地图缩放级别
|
|
viewMode: '2D'
|
|
// pitch: 43.5, // 设置俯仰角
|
|
// rotation: 45 // 设置地图旋转角度
|
|
})
|
|
// var search = new window.TMap.service.Search({ pageSize: 10 });
|
|
// var markers = new window.TMap.MultiMarker({
|
|
// map: map,
|
|
// geometries: [],
|
|
// });
|
|
console.log(window.TMap)
|
|
console.log(window)
|
|
|
|
//Map实例创建后，通过on方法绑定点击事件
|
|
map.on("click", clickHandler)
|
|
},
|
|
searchMap () {
|
|
|
|
}
|
|
|
|
|
|
},
|
|
props: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.div_total {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
.div_left {
|
|
width: 70%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.map {
|
|
height: 100%;
|
|
}
|
|
|
|
.div_search {
|
|
z-index: 9999;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
/* .map {
|
|
width: 100%;
|
|
height: 400px;
|
|
} */
|
|
</style>
|
|
|