`
荼罗庄
  • 浏览: 46666 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

marker显示(openlayers+google)

 
阅读更多
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);
}
分享到:
评论
1 楼 周佩煌 2012-08-10  
怎么使用啊,表示不会用啊!

相关推荐

    openlayers 添加标注 markers

    openlayers 添加标注 markers 怎么给Google地图添加标注

    openlayers-map-marker:使用openlayers地图创建标记。 带有弹出窗口,地图多边形,地图事件的地图标记

    具有Openlayers 6.3的地图标记 使用openlayers地图创建标记,使用弹出窗口创建简单的地图标记。 地图html < head > < link rel =" stylesheet " href =" ...

    vue+openlayers简单示例

    你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...

    openLayers geoserver常见问题

    在OpenLayers中,删除Layer中的marker可以通过以下步骤实现:首先,获取到你想要删除的marker对象,这通常基于用户交互事件(如点击)来完成。然后,调用Layer的removeFeatures方法,传入marker对象即可将其从地图上...

    OpenLayers

    OpenLayers 可以加载和显示KML和GPX格式的数据。使用 `ol.format.KML` 或 `ol.format.GPX` 类解析文件,然后将结果添加到矢量图层。 ### 8. 学习资源 要深入学习OpenLayers,可以参考《OpenLayers 2.10 初学者指南...

    Openlayers2扩展markers图层

    综上所述,"OpenLayers2扩展markers图层"涉及到的核心技术包括OpenLayers Marker的创建与管理、图层控制、事件处理以及动态效果的实现。通过学习这些知识点,开发者可以创建具有丰富交互性的地图应用,满足各种定制...

    地图选择及地图偏移解决方案(一)

    标题“地图选择及地图偏移解决方案(一)”暗示了我们即将探讨的是关于地图应用开发中的一个重要主题,即如何在不同的地图平台之间进行选择,并处理地图显示时可能出现的偏移问题。这通常涉及到地理信息系统(GIS)...

    PWEB_JS_MAP:PWEB项目-在地图上显示它+找到两个点(标记)之间的路径+游戏

    这个项目涉及到的地图API可能包括Google Maps API或其他类似的开源库如Leaflet或OpenLayers。 1. **地图显示**: - JavaScript提供了与地图服务交互的能力,允许我们在网页上嵌入地图。这通常通过调用地图API来...

    googlem.rar_JavaScript 地图_地图 javascript

    JavaScript地图技术基于WebGL和SVG等技术,通过JavaScript库(如Leaflet、OpenLayers或Google Maps API)在浏览器中呈现地理数据。这种技术的核心在于它可以实时更新地图视图,响应用户的交互,例如缩放、平移、标记...

    JavaScript使用Markers方式添加点

    JavaScript库,如OpenLayers、Leaflet或Google Maps API,提供了方便的方法来在地图上创建和管理这些标记。 首先,让我们深入理解`Markers`的概念。在地图应用中,Markers是视觉元素,用于突出显示地图上的特定位置...

    js实现地图亮点,所需积分为什么自动会加

    首先,我们需要一个地图API,如Google Maps API、OpenLayers、Mapbox或Leaflet。Leaflet是一个轻量级且功能强大的库,适用于在Web页面上创建交互式地图。在 Leaflet 中,我们可以利用Marker和Popup来创建亮点效果。...

    JB_Marker

    在JavaScript编程中,地图标记通常是通过使用GIS(地理信息系统)库来实现的,例如Google Maps API、Leaflet.js或OpenLayers等。JB_Marker可能就是这样的一个库,它为开发者提供了更高级的功能和定制选项,以便在...

    Flex地图,可以自己添加坐标点,添加信息

    常见的地图API如Google Maps API或OpenLayers提供Flex接口。例如,Google Maps API提供了`com.google.maps`命名空间,包含了一系列类用于展示和操作地图。 2. **创建地图组件**: 在Flex项目中,创建一个地图组件...

    JavaScript植物地图

    JavaScript有许多开源的地图库,如Leaflet、OpenLayers或Google Maps API,它们提供了丰富的地图操作和自定义功能。开发者需要学习如何使用这些库来加载地图、设置标记、添加图层以及处理用户交互。例如,通过创建...

    mapApp:简单的地图应用程序工作

    通常,开发者会利用如Google Maps API、Leaflet.js或OpenLayers等地图库来简化这一过程。这些库提供了丰富的功能,包括地图初始化、设置地图中心点、添加图层、标记、信息窗口等。 首先,我们需要了解如何引入地图...

    drag-and-drop-custom-marker-from-a-menu:传单

    6. **地图API集成**:此项目可能使用了某个地图API,如Google Maps API、Leaflet或OpenLayers等。这些API提供了在地图上添加、移动标记的方法。我们需要学习API的文档,了解如何创建标记、设置标记位置以及与拖放...

    营销网点世界地图html代码.zip

    在HTML(超文本标记语言)中,地图通常通过集成GIS(地理信息系统)技术或使用JavaScript库如Google Maps API、Leaflet.js、OpenLayers等来实现。这些库提供了丰富的功能,包括地图定位、缩放、拖动、图层控制以及...

    js-map:在地图上显示您的IP国家/地区名称的位置

    地图显示技术通常基于API,如Google Maps API、Leaflet、OpenLayers等。这些API提供了丰富的功能,包括地图缩放、平移、标记添加以及地理编码(将IP地址转换为地理位置)。"js-map"可能就是利用这样的API来获取和...

    js 地图查看 完整版

    2. **Map库或框架**:如Google Maps API、Leaflet.js、OpenLayers等,它们提供了丰富的地图操作和定制功能,包括地图加载、缩放、平移、标记、图层管理等。开发者可以通过这些库来构建地图界面,并与后端数据进行...

Global site tag (gtag.js) - Google Analytics