Google Maps API 进级:GoogleMaps中显示画中画
GoogleMaps中显示画中画。
方法:可以编辑合适的HTML语句,可以调用GMarker.showMapBlowup()方法显示小地图。
GMarker.showMapBlowup(opts);
Opts:GinfoWindowsOptions对象。包括6个属性。selectedTab数字,表示选中的标签序号,从0开始,仅对多标签的信息窗口有效。maxWidth数字,信息窗口的最大宽度,像素值。onOpenFn函数,信息窗口打开是调用。onCloseFn函数,信息窗口关闭时调用。zoomLevel数字,仅对showMapBlowup()方法有效,指定小地图缩放级别。mapType,GmapType对象,仅对showMapBlowup()方法有效,指定小地图地图类型。
GMap2对象也有类似的方法。
GMap2.showMapBlowup(point, opts);
Point:GlatLng对象,小地图中心。
Opts:GinfoWindowsOptions对象。
示例代码:
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var geoPoint= new GLatLng(39.92, 116.46);
map.setCenter(geoPoint, 4);
//创建一个像放大镜的地标
var myIcon= new GIcon();
myIcon.image = "magnifier.gif";
myIcon.shadow = "shadow.gif";
myIcon.iconSize = new GSize(44, 44);
myIcon.shadowSize = new GSize(1, 1);
myIcon.iconAnchor = new GPoint(18, 20);
myIcon.infoWindowAnchor = new GPoint(15, 18);
var magnifier = new GMarker(geoPoint,
{ icon: myIcon,
draggable: true,
title: "请把放大镜拖动到需要查看卫星图的地方"
});
map.addOverlay(magnifier);
//拖放结束时显示卫星图
GEvent.addListener(magnifier, "dragend", function()
{
var zoom = map.getZoom();
magnifier.showMapBlowup({zoomLevel: zoom, mapType: G_SATELLITE_MAP });
});
}
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步