当前位置: 代码迷 >> Web前端 >> g地图 一些实用方法
  详细解决方案

g地图 一些实用方法

热度:222   发布时间:2012-09-15 19:09:29.0
gmap 一些实用方法

1.创建图标背景色
var icon = new GIcon();
icon.image = "blue.png";
icon.shadow=
"http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 30);
icon.shadowSize = new GSize(22, 30);
icon.iconAnchor = new GPoint(6, 30);
icon.infoWindowAnchor = new GPoint(5, 1);

2.创建地图
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng(39.917, 116.397);
map.setCenter(point, 13);

3.创建图标
var marker = new GMarker(point, icon);
map.addOverlay(marker);

4.获取经纬度
GEvent.addListener(map, "moveend", function(){
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

5.在图标上弹出信息页签
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("可以了!");
});

6.根据地图坐标随机生成图标,并可弹出信息提示框
a>弹出信息提示框
function createMarker(point) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("You clicked me!");
});
}

b>根据地图随机生成图标
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
createMarker(new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random()));
}

7.从xml文件读取图标信息
GDownloadUrl("data.xml", function(data, responseCode){
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for(var i = 0; i < markers.length; i++)
{
var point = new GLatLng(parseFloat(markers
.getAttribute("lat")),
parseFloat(markers
.getAttribute("lng")));
var marker = new GMarker(point);
map.addOverlay(marker);
}
});

8.创建/删除图标
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});

9.随机生成线条
var points = [];
for(var i = 0; i < 5; i++)
{
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2){
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

10.平移地图中心
window.setTimeout(function(){
map.panTo(new GLatLng(41.4569, 110.1569));
}, 1000);


描述: 得到节点信息

  相关解决方案