概述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图-覆盖物</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
position: relative;
float: left;
}
span{
padding: 10px;
}
</style>
</head>
<body onLoad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div>
<span>显示</span>
<input type="button" onClick="showMarker()" value="显示标注"/>
<input type="button" onClick="showPolyline()" value="显示线"/>
<input type="button" onClick="showPolygon()" value="显示面"/>
<input type="button" onClick="showPolygon1()" value="显示中空面"/>
<input type="button" onClick="showRectangle()" value="显示矩形"/>
<input type="button" onClick="showCircle()" value="显示圆形"/>
<input type="button" onClick="showInfoWindow()" value="显示信息窗口"/>
<input type="button" onClick="showMarkerLabel()" value="显示标注标签"/>
</div>
<div>
<span>操作</span>
<input type="button" onClick="showInfoWindowMarker()" value="为标注绑定点击打开信息窗口"/>
<input type="button" onClick="getInfoWindowMarker()" value="获取信息窗口的内容"/>
</div>
</body>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script type="text/javascript">
var map;
var zoom = 10;
var infoWin;
function onLoad() {
map = new T.Map("mapDiv");
map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
//使用卫星和路网的混合视图 （其他视图都可以)
map.addControl(TMAP_HYBRID_MAP);
}
//显示标注
function showMarker(){
//清除覆盖物
map.clearOverLays();
//创建标注对象
var marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
//向地图上添加标注
map.addOverLay(marker);
}
//显示线
function showPolyline(){
//清除覆盖物
map.clearOverLays();
points = [];
points.push(new T.LngLat(116.41136, 39.97569));
points.push(new T.LngLat(116.32969, 39.92940));
points.push(new T.LngLat(116.385438, 39.90610));
var line = new T.Polyline(points);
line.setColor("red");
map.addOverLay(line);
}
//显示多边形
function showPolygon(){
//清除覆盖物
map.clearOverLays();
var points = [];
points.push(new T.LngLat(116.41136, 39.97569));
points.push(new T.LngLat(116.411794, 39.9068));
points.push(new T.LngLat(116.32969, 39.92940));
points.push(new T.LngLat(116.385438, 39.90610));
var polygon = new T.Polygon(points,{ color: "blue",weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5});
//向地图上添加面
map.addOverLay(polygon);
}
//显示带洞多边形
function showPolygon1(){
//清除覆盖物
map.clearOverLays();
var points = [];
points.push(new T.LngLat(116.315000,39.964750));
points.push(new T.LngLat(116.303330,39.960810));
points.push(new T.LngLat(116.306760,39.866270));
points.push(new T.LngLat(116.328740,39.847560));
points.push(new T.LngLat(116.366500,39.855730));
points.push(new T.LngLat(116.442380,39.856520));
points.push(new T.LngLat(116.455080,39.865480));
points.push(new T.LngLat(116.456110,39.950020));
points.push(new T.LngLat(116.428990,39.967390));
var points1 = [];
points1.push(new T.LngLat(116.349330,39.941590));
points1.push(new T.LngLat(116.350620,39.900650));
points1.push(new T.LngLat(116.353110,39.898670));
points1.push(new T.LngLat(116.413880,39.899990));
points1.push(new T.LngLat(116.418340,39.903150));
points1.push(new T.LngLat(116.429330,39.903940));
points1.push(new T.LngLat(116.427270,39.947910));
points1.push(new T.LngLat(116.365810,39.946600));
//创建面对象
var polygon = new T.Polygon([points,points1],{
color: "black", weight: 3, opacity: 0.2, fillColor: "blue", fillOpacity: 0.5
});
//向地图上添加面
map.addOverLay(polygon);
}
//显示矩形
function showRectangle(){
//清除覆盖物
map.clearOverLays();
var bounds = new T.LngLatBounds(new T.LngLat(116.36231, 39.87784),new T.LngLat( 116.43954, 39.92841));
var rect = new T.Rectangle(bounds );
//向地图上添加矩形
map.addOverLay(rect);
}
//显示圆形
function showCircle(){
//清除覆盖物
map.clearOverLays();
var circle = new T.Circle(new T.LngLat(116.40093, 39.90313), 5000,{color:"blue",weight:5,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"});
//向地图上添加圆
map.addOverLay(circle);
}
//显示信息窗口
function showInfoWindow(){
//清除覆盖物
map.clearOverLays();
var lnglat = new T.LngLat(116.40969, 39.94940);
//创建信息窗口对象
infoWin = new T.InfoWindow();
infoWin.setLngLat(lnglat);
//设置信息窗口要显示的内容
infoWin.setContent("添加的信息窗口");
//向地图上添加信息窗口
map.addOverLay(infoWin);
}
//显示标注文字标签
function showMarkerLabel(){
//清除覆盖物
map.clearOverLays();
marker = new T.Marker( new T.LngLat(116.40969, 39.94940));
// 创建标注
map.addOverLay(marker);
label = new T.Label({
text: "<b>文字标注!!!<b>",
position: marker.getLngLat(),
offset: new T.Point(3, -30)
});
map.addOverLay(label);
}
//标注上显示信息窗口
function showInfoWindowMarker(){
map.clearOverLays();
marker = new T.Marker( new T.LngLat(116.40969, 39.94940));
// 创建标注
map.addOverLay(marker);
//创建信息窗口对象
infoWin = new T.InfoWindow();
var info = "我要在标注上显示的内容，可以是html片段，也可以是纯文本";
infoWin.setContent(info);
//为标注注册点击事件
marker.addEventListener("click", function () {
marker.openInfoWindow(infoWin);
});
}
//标注上显示信息窗口
function getInfoWindowMarker(){
try{
var info = infoWin.getContent();
alert(info);
}catch(e){
alert("请先为标注绑定点击打开信息窗口事件")
}
}
</script>
</html>最后
以上就是神勇小天鹅为你收集整理的天地图-第五篇-覆盖物的全部内容，希望文章能够帮你解决天地图-第五篇-覆盖物所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复