image.png
<template>
<div id="app">
<div id="map"></div>
<!-- <div id="map2"></div> -->
<button @click="maxZooms">放⼤</button>
<button @click="minZooms">缩⼩</button>
<select v-model="selects" @change="seChang(selects)">
<option
v-for="(option, index) in opt"
:key="index"
v-bind:value="option.title"
>
{{ option.val }}
</option>
</select>
选择了{{ selects }}
<div class="center">
<input type="text" v-model="lng" />
<input type="text" v-model="lat" />
<input type="text" v-model="zooms" />
<button @click="setCenter">设置中⼼点及缩放</button>
</div>
<div>
<p>设置地图的显⽰级别</p>
<button @click="setZoomLevels([1, 18])">1-18级</button>
</div>
</div>
小提琴新春乐</template>
<script>
export default {
data() {
return {
lng: "116.64819",
lat: "40.12948",一定要爱你 吴紫涵
zooms: "11",
selects: "T_ANCHOR_TOP_LEFT",
opt: [
{
title: "T_ANCHOR_TOP_LEFT",
val: "左上⾓"
},
{
title: " T_ANCHOR_TOP_RIGHT",
val: "右上⾓"
},
{
title: "T_ANCHOR_BOTTOM_LEFT",
val: "左下⾓"
},
{
title: "T_ANCHOR_BOTTOM_RIGHT",
title: "T_ANCHOR_BOTTOM_RIGHT",
val: "右下⾓"
}
],
cityName: "" //暂存城市名称
};
},
mounted() {
let that = this;
// 挂载完成后渲染地图
this.$nextTick(function() {
});
},
methods: {
onLoad() {
// 基本设置
let that = this;
that.map = new window.T.Map("map", {
// 地图的投影⽅式 EPSG:900913(墨卡托投影)，EPSG:4326(⼤地平⾯投影)
projection: "EPSG:4326",
// min 0 max 18
minZoom: 0,
maxZoom: 18
});
AndZoom(new T.LngLat(116.40769, 39.89945), 10);
/*
setTimeout(function(){
// 2秒后地图平移
that.map.panTo(new T.LngLat(117.4022,39.555))
// 2秒后缩⼩
that.map.setZoom(9)
},2000)
*/
// 获取地图的可视区范围
// 获取可视区域
let bs = Bounds();
// 可视区左下⾓
let bssw = bs.getSouthWest();
// 可视区右上⾓
吴瑜个人资料
let bsne = bs.getNorthEast();
// alert("当前可视区域的范围是"+bssw.lng+","+bssw.lat+"到"+bsne.lng+","+bsne.lat)
console.log(
"当前可视区域的范围是" +
bssw.lng +
"," +
bssw.lat +
"到" +
bsne.lng +
"," +
bsne.lat
)
;
// 添加控件
var ctrl = new T.Control.MapType([
{
title: "地图", //地图控件上所要显⽰的图层名称
不装饰你的梦国语版icon: "v/v4.0/image/map/maptype/vector.png", //地图控件上所要显⽰的图层图标（默认图标⼤⼩80x80） layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
},
{
title: "卫星",
icon:
"v/v4.0/image/map/maptype/satellite.png",
layer: TMAP_SATELLITE_MAP
},
{
title: "卫星混合",
icon:
"v/v4.0/image/map/maptype/satellitepoi.png",
layer: TMAP_HYBRID_MAP
layer: TMAP_HYBRID_MAP
},
{
title: "地形",
icon:
" v/v4.0/image/map/maptype/terrain.png",
layer: TMAP_TERRAIN_MAP
},
{
title: "地形混合",
icon:
" v/v4.0/image/map/maptype/terrainpoi.png",
layer: TMAP_TERRAIN_HYBRID_MAP
}
]);
that.map.addControl(ctrl);
//创建缩放平移控件对象放⼤缩⼩
// l.setPosition(T_ANCHOR_TOP_RIGHT)
//添加缩放平移控件
that.map.l);
//创建⽐例尺控件对象
let scale = new T.Control.Scale();
//添加⽐例尺控件
that.map.addControl(scale);
// 添加鹰眼坐标
let miniMap = new T.Control.OverviewMap({
// 鹰眼视图是否打开
isOpen: true,
// 控件的⼤⼩
size: new T.Point(100, 100)
});
that.map.addControl(miniMap);
// 创建版权控件对象
var copyControl = new T.Control.Copyright({
position: T_ANCHOR_BOTTOM_LEFT
});
that.map.addControl(copyControl);
var bsk = Bounds(); //返回地图可视区域
// 添加⼀个版权信息
copyControl.addCopyright({
// 版权信息的唯⼀标识
id: 1,
// 版权⽂本信息
好听的歌曲大全100首content:
"<a href='v' target='_blank' style='font-size:14px;margin-left:200px'>⾃定义的版权控件</a>", // 版权所适⽤的地理区域
bounds: bsk
});
//创建右键菜单对象
var menu = new T.ContextMenu({ width: 140 });
//添加右键菜单
var txtMenuItem = [
{
text: "放⼤",
callback: function() {
In();
}
},
{
text: "缩⼩",
callback: function() {
Out();
}
},
{
text: "放置到最⼤级",
callback: function() {
that.map.setZoom(18);
that.map.setZoom(18);
}
},
{
text: "查看全国",
callback: function() {
that.map.setZoom(4);
}我是歌手杨宗纬唱的歌
},
{
text: "获得右键点击处坐标",
isDisable: false,
callback: function(lnglat) {
Lng() + "," + Lat());
}
}
];
for (var i = 0; i < txtMenuItem.length; i++) {
//添加菜单项
var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback); //item.disable();
menu.addItem(item);
if (i == 1 || i == 3) {
//添加分割线
menu.addSeparator();
}
}
that.map.addContextMenu(menu);
//创建图⽚对象
var icon = new T.Icon({
iconUrl: "v/img/map/markerA.png",
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
//向地图上添加⾃定义标注
var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {
icon: icon
});
that.map.addOverLay(marker);
// ⾃定义信息浮窗
var infoWin1 = new T.InfoWindow();
var sContent = "<div>123</div>";
infoWin1.setContent(sContent);
marker.addEventListener("click", function() {
marker.openInfoWindow(infoWin1);
});
},
maxZooms() {
let that = this;
In();
console.log(Zoom());
},
minZooms() {
let that = this;
Out();
},
setCenter() {
AndZoom(new T.LngLat(this.lng, this.lat), s); },
setZoomLevels(levels) {
this.map.setMinZoom(levels[0]);
this.map.setMaxZoom(levels[1]);
},
seChang(e) {
console.log(e);
}
}
};
</script>
发布评论