Mercurial > hgrepos > hgweb.cgi > skipweb

<html>
<head>
<title>OpenLayers Simplest Example</title>
</head>
<body>
<div id="Map" style="height:600px;"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
  var lon = 139.83643;
  var lat = 38.915394;
  var zoom = 16;

  var fromProjection = new OpenLayers.Projection("EPSG:4326");
  var toProjection = new OpenLayers.Projection("EPSG:900913");
  var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
  map = new OpenLayers.Map("Map");
  var mapnik = new OpenLayers.Layer.OSM();
  map.addLayer(mapnik);
  map.setCenter(position, zoom);

  var popup;
  var marker_layer = new OpenLayers.Layer.Markers( "Markers" );
  var size = new OpenLayers.Size(42,50);
  var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  var contentStrings = new Array();

  var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
  marker = new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat).transform(fromProjection,toProjection), icon_marker);
  marker.events.register('click', marker, function(evt) {
  popup = new OpenLayers.Popup.FramedCloud("Popup",
  new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection),
  null,"ほげほげ",null,true);
  map.addPopup(popup);
  });
  marker.events.register('mouseout', marker, function(evt) {popup.hide();});
  marker_layer.addMarker(marker);

  var icon_marker2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
  marker2 = new OpenLayers.Marker(new OpenLayers.LonLat(139.83664,38.915955).transform(fromProjection,toProjection), icon_marker2);
  marker2.events.register('click', marker2, function(evt) {
  popup2 = new OpenLayers.Popup.FramedCloud("Popup2",
  new OpenLayers.LonLat(139.83664, 38.915955).transform( fromProjection, toProjection),
  null,"fujix",null,true);
  map.addPopup(popup2);
  });
  //here add mouseout event
  marker2.events.register('mouseout', marker2, function(evt) {popup2.hide();});

  marker_layer.addMarker(marker2);

  map.addLayer(marker_layer);

</script>
</body>

</html>
author	ARAKI Tsuyohito <c113007@e.koeki-u.ac.jp>
date	Tue, 08 Dec 2015 19:36:05 +0900
parents	1f7c02ee7320
children