marker显示(openlayers+google)

本文详细介绍了如何使用JavaScript实现地图的初始化以及标记的添加过程,包括地图类型选择、地图缩放、地图中心点设定和地图控制组件的配置。
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);
}
首先,你需要在React项目中安装OpenLayersGoogle Maps API: ``` npm install ol google-maps-react ``` 然后,在React组件中引入OpenLayersGoogle Maps API: ```jsx import React, { Component } from 'react'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Overlay from 'ol/Overlay'; import 'ol/ol.css'; import { GoogleApiWrapper } from 'google-maps-react'; class MapContainer extends Component { constructor(props) { super(props); this.state = { map: null, google: null, marker: null, overlay: null, }; } componentDidMount() { const { google } = this.props; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM(), }), ], view: new View({ center: [0, 0], zoom: 2, }), }); const marker = new Overlay({ element: document.getElementById('marker'), positioning: 'bottom-center', stopEvent: false, }); map.addOverlay(marker); this.setState({ map, google, marker }); } handleMapClick = (event) => { const { marker, map } = this.state; const coordinate = event.coordinate; marker.setPosition(coordinate); const pixel = map.getPixelFromCoordinate(coordinate); const features = map.getFeaturesAtPixel(pixel); if (features && features.length > 0) { const feature = features[0]; const content = feature.get('content'); marker.setOffset([0, -22]); marker.getElement().innerHTML = content; } else { marker.setOffset([0, 0]); marker.getElement().innerHTML = ''; } }; render() { const style = { width: '100%', height: '100%', }; return ( <div id="map" style={style} onClick={this.handleMapClick}> <div id="marker" /> </div> ); } } export default GoogleApiWrapper({ apiKey: 'YOUR_API_KEY', })(MapContainer); ``` 在上面的代码中,我们创建了一个`MapContainer`组件,它包含一个OpenLayers地图和一个Google Maps API。我们在`componentDidMount`生命周期方法中初始化地图和标记。 我们还创建了一个名为`handleMapClick`的事件处理程序,当用户单击地图时,它将显示一个标记,并在标记上显示一个悬浮框,其中包含与点击的特征相关联的内容。我们使用`getFeaturesAtPixel`方法获取单击位置的特征,并从特征中获取`content`属性的值。 最后,我们将`MapContainer`包装在`GoogleApiWrapper`组件中,并传递我们的Google Maps API密钥。这使我们可以轻松地在React应用程序中使用Google Maps API。 这只是一个简单的示例,你可以根据你的需求自定义它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值