function initMap(type) {
var lon = centerPoint.split(',')[0];
var lat = centerPoint.split(',')[1];
var point = new OpenLayers.LonLat(lon,lat)
.transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913"));
map = new OpenLayers.Map('map');
var gmap = new OpenLayers.Layer.Google("街道地形",{numZoomLevels: 20,visibility: false});
var gphy = new OpenLayers.Layer.Google("自然地形",{type: google.maps.MapTypeId.TERRAIN});
var ghyb = new OpenLayers.Layer.Google("混合图层",{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
var gsat = new OpenLayers.Layer.Google("卫星图层",{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
map.addLayers([gmap, gphy, ghyb, gsat]);
map.setCenter(point, zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition({element:$('location')}));
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.PanZoom());
if(type=='manager'){
map.div.oncontextmenu=function(){return false;}
map.events.register("contextmenu", null, addMarker);
}
markers=new OpenLayers.Layer.Markers("标注");
map.addLayer(markers);
}
function initMarker(point,n,type){
var size=new OpenLayers.Size(20,30);
var calculateOffset=function(size){return new OpenLayers.Pixel(-(size.w/2),-size.h);};
var icon=new OpenLayers.Icon(url,size,null,calculateOffset);
marker=new OpenLayers.Marker(point,icon);
var feature=new OpenLayers.Feature(markers,point);
feature.popupClass=OpenLayers.Class(OpenLayers.Popup.AnchoredBubble,{autoSize:true});
var markerMove=function (e) {
feature.data.popupContentHTML="testMarkerMove";
feature.data.overflow="auto";
popup=feature.createPopup(false);
map.addPopup(popup);
OpenLayers.Event.stop(e);
}
var markerClick=function(e){
var feature2=new OpenLayers.Feature(markers,point);feature2.popupClass=OpenLayers.Class(OpenLayers.Popup.AnchoredBubble,{autoSize:true});
feature2.data.popupContentHTML="testMarkerClick";
feature2.data.overflow="auto";
popup2=feature2.createPopup(true);
map.addPopup(popup2);
map.removePopup(popup);
OpenLayers.Event.stop(e);
};
marker.events.register("mousemove", feature, markerMove);
marker.events.register("mouseout", feature, function markerOut(){map.removePopup(popup);});
marker.events.register("mousedown", null, markerClick);
markers.addMarker(marker);
}
分享到:
相关推荐
openlayers 添加标注 markers 怎么给Google地图添加标注
具有Openlayers 6.3的地图标记 使用openlayers地图创建标记,使用弹出窗口创建简单的地图标记。 地图html < head > < link rel =" stylesheet " href =" ...
你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...
在OpenLayers中,删除Layer中的marker可以通过以下步骤实现:首先,获取到你想要删除的marker对象,这通常基于用户交互事件(如点击)来完成。然后,调用Layer的removeFeatures方法,传入marker对象即可将其从地图上...
OpenLayers 可以加载和显示KML和GPX格式的数据。使用 `ol.format.KML` 或 `ol.format.GPX` 类解析文件,然后将结果添加到矢量图层。 ### 8. 学习资源 要深入学习OpenLayers,可以参考《OpenLayers 2.10 初学者指南...
综上所述,"OpenLayers2扩展markers图层"涉及到的核心技术包括OpenLayers Marker的创建与管理、图层控制、事件处理以及动态效果的实现。通过学习这些知识点,开发者可以创建具有丰富交互性的地图应用,满足各种定制...
标题“地图选择及地图偏移解决方案(一)”暗示了我们即将探讨的是关于地图应用开发中的一个重要主题,即如何在不同的地图平台之间进行选择,并处理地图显示时可能出现的偏移问题。这通常涉及到地理信息系统(GIS)...
这个项目涉及到的地图API可能包括Google Maps API或其他类似的开源库如Leaflet或OpenLayers。 1. **地图显示**: - JavaScript提供了与地图服务交互的能力,允许我们在网页上嵌入地图。这通常通过调用地图API来...
JavaScript地图技术基于WebGL和SVG等技术,通过JavaScript库(如Leaflet、OpenLayers或Google Maps API)在浏览器中呈现地理数据。这种技术的核心在于它可以实时更新地图视图,响应用户的交互,例如缩放、平移、标记...
JavaScript库,如OpenLayers、Leaflet或Google Maps API,提供了方便的方法来在地图上创建和管理这些标记。 首先,让我们深入理解`Markers`的概念。在地图应用中,Markers是视觉元素,用于突出显示地图上的特定位置...
首先,我们需要一个地图API,如Google Maps API、OpenLayers、Mapbox或Leaflet。Leaflet是一个轻量级且功能强大的库,适用于在Web页面上创建交互式地图。在 Leaflet 中,我们可以利用Marker和Popup来创建亮点效果。...
在JavaScript编程中,地图标记通常是通过使用GIS(地理信息系统)库来实现的,例如Google Maps API、Leaflet.js或OpenLayers等。JB_Marker可能就是这样的一个库,它为开发者提供了更高级的功能和定制选项,以便在...
常见的地图API如Google Maps API或OpenLayers提供Flex接口。例如,Google Maps API提供了`com.google.maps`命名空间,包含了一系列类用于展示和操作地图。 2. **创建地图组件**: 在Flex项目中,创建一个地图组件...
JavaScript有许多开源的地图库,如Leaflet、OpenLayers或Google Maps API,它们提供了丰富的地图操作和自定义功能。开发者需要学习如何使用这些库来加载地图、设置标记、添加图层以及处理用户交互。例如,通过创建...
通常,开发者会利用如Google Maps API、Leaflet.js或OpenLayers等地图库来简化这一过程。这些库提供了丰富的功能,包括地图初始化、设置地图中心点、添加图层、标记、信息窗口等。 首先,我们需要了解如何引入地图...
6. **地图API集成**:此项目可能使用了某个地图API,如Google Maps API、Leaflet或OpenLayers等。这些API提供了在地图上添加、移动标记的方法。我们需要学习API的文档,了解如何创建标记、设置标记位置以及与拖放...
在HTML(超文本标记语言)中,地图通常通过集成GIS(地理信息系统)技术或使用JavaScript库如Google Maps API、Leaflet.js、OpenLayers等来实现。这些库提供了丰富的功能,包括地图定位、缩放、拖动、图层控制以及...
地图显示技术通常基于API,如Google Maps API、Leaflet、OpenLayers等。这些API提供了丰富的功能,包括地图缩放、平移、标记添加以及地理编码(将IP地址转换为地理位置)。"js-map"可能就是利用这样的API来获取和...
2. **Map库或框架**:如Google Maps API、Leaflet.js、OpenLayers等,它们提供了丰富的地图操作和定制功能,包括地图加载、缩放、平移、标记、图层管理等。开发者可以通过这些库来构建地图界面,并与后端数据进行...